JS可自定义风格的HTML5 VIDEO这个Plyr播放器，怎么在暂停和首帧时隐藏控制条

波西尼尼 2017-06-09 01:09:20
网上的Plyr这个播放器，就是这个https://plyr.io/，VIDEO播放器未开始播放时默认怎么让他隐藏控制条，暂停时也隐藏，有没有修改方法提供下啊，谢谢了！

红框内的控制条，让他未开始播放时默认隐藏，然后暂停时也隐藏。只需要保留视频正中间那个播放按钮就行了

...全文
1676 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
fatesky8 2018-02-06
  • 打赏
  • 举报
 回复
好东西，正需要这个，在网上试了好几个HTML5的播放器，基本上都没有免费的，还是这个免费还能自定义的plyr好。
波西尼尼 2017-06-09
  • 打赏
  • 举报
 回复
引用 7 楼 showbo 的回复:
[quote=引用 6 楼 ermoziwang 的回复:] [quote=引用 5 楼 showbo 的回复:] [quote=引用 2 楼 ermoziwang 的回复:] [quote=引用 1 楼 net_lover 的回复:] api里面有个controls设置，里面的东西去掉 ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] https://github.com/sampotts/plyr#api
我说错咯，是默认隐藏，但是鼠标移到视频上面，还是需要显示出来，鼠标移开又隐藏掉。就像现在视频播放过程中控制条的显示方式一样。[/quote]这个需要自己加事件了 
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">
<div style="height:300px;width:500px">
    <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
        <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
        <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
    </video>
</div>
<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.1/jquery.min.js"></script>
<script>
    var players = plyr.setup('video');
    $(players[0].getContainer()).hover(function () {
        $('div.plyr__controls', this).show();//鼠标移动上去显示
    }, function () {
        $('div.plyr__controls', this).hide();//鼠标移动出来隐藏
    })
        .find('div.plyr__controls').hide();//隐藏控制条
</script>
[/quote] 谢谢大神了，因为是第三方插件，插件JS太长，没有贴出来，所以我这里没说明白，他插件里面加了鼠标控制视频的，所以再单独加鼠标事件就冲突了，后来找到插件本身的隐藏控制条的方法了 把红框内的播放中状态条件去掉就可以了。，只是不够完美，但是基本可以解决问题。[/quote] 这个是给容器加隐藏显示控制条的事件，应该没有冲突，我这里测试正常播放没有影响[/quote] 好的，了解了，我用你的代码再加上去研究研究，辛苦大神了
Go 旅城通票 2017-06-09
  • 打赏
  • 举报
 回复
引用 6 楼 ermoziwang 的回复:
[quote=引用 5 楼 showbo 的回复:] [quote=引用 2 楼 ermoziwang 的回复:] [quote=引用 1 楼 net_lover 的回复:] api里面有个controls设置，里面的东西去掉 ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] https://github.com/sampotts/plyr#api
我说错咯，是默认隐藏，但是鼠标移到视频上面，还是需要显示出来，鼠标移开又隐藏掉。就像现在视频播放过程中控制条的显示方式一样。[/quote]这个需要自己加事件了 
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">
<div style="height:300px;width:500px">
    <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
        <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
        <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
    </video>
</div>
<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.1/jquery.min.js"></script>
<script>
    var players = plyr.setup('video');
    $(players[0].getContainer()).hover(function () {
        $('div.plyr__controls', this).show();//鼠标移动上去显示
    }, function () {
        $('div.plyr__controls', this).hide();//鼠标移动出来隐藏
    })
        .find('div.plyr__controls').hide();//隐藏控制条
</script>
[/quote] 谢谢大神了，因为是第三方插件，插件JS太长，没有贴出来，所以我这里没说明白，他插件里面加了鼠标控制视频的，所以再单独加鼠标事件就冲突了，后来找到插件本身的隐藏控制条的方法了 把红框内的播放中状态条件去掉就可以了。，只是不够完美，但是基本可以解决问题。[/quote] 这个是给容器加隐藏显示控制条的事件，应该没有冲突，我这里测试正常播放没有影响
波西尼尼 2017-06-09
  • 打赏
  • 举报
 回复
引用 5 楼 showbo 的回复:
[quote=引用 2 楼 ermoziwang 的回复:]
[quote=引用 1 楼 net_lover 的回复:]
api里面有个controls设置，里面的东西去掉
['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen']


https://github.com/sampotts/plyr#api


我说错咯，是默认隐藏，但是鼠标移到视频上面，还是需要显示出来，鼠标移开又隐藏掉。就像现在视频播放过程中控制条的显示方式一样。[/quote]这个需要自己加事件了

<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">

<div style="height:300px;width:500px">

    <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>

        <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">

        <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">

    </video>

</div>

<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.1/jquery.min.js"></script>

<script>

    var players = plyr.setup('video');

    $(players[0].getContainer()).hover(function () {

        $('div.plyr__controls', this).show();//鼠标移动上去显示

    }, function () {

        $('div.plyr__controls', this).hide();//鼠标移动出来隐藏

    })

        .find('div.plyr__controls').hide();//隐藏控制条

</script>
[/quote]


谢谢大神了，因为是第三方插件，插件JS太长，没有贴出来，所以我这里没说明白，他插件里面加了鼠标控制视频的，所以再单独加鼠标事件就冲突了，后来找到插件本身的隐藏控制条的方法了

把红框内的播放中状态条件去掉就可以了。，只是不够完美，但是基本可以解决问题。
Go 旅城通票 2017-06-09
  • 打赏
  • 举报
 回复
引用 2 楼 ermoziwang 的回复:
[quote=引用 1 楼 net_lover 的回复:] api里面有个controls设置，里面的东西去掉 ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] https://github.com/sampotts/plyr#api
我说错咯，是默认隐藏，但是鼠标移到视频上面，还是需要显示出来，鼠标移开又隐藏掉。就像现在视频播放过程中控制条的显示方式一样。[/quote]这个需要自己加事件了 
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">
<div style="height:300px;width:500px">
    <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
        <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
        <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
    </video>
</div>
<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.1/jquery.min.js"></script>
<script>
    var players = plyr.setup('video');
    $(players[0].getContainer()).hover(function () {
        $('div.plyr__controls', this).show();//鼠标移动上去显示
    }, function () {
        $('div.plyr__controls', this).hide();//鼠标移动出来隐藏
    })
        .find('div.plyr__controls').hide();//隐藏控制条
</script>
Go 旅城通票 2017-06-09
  • 打赏
  • 举报
 回复
引用 1 楼 net_lover 的回复:
api里面有个controls设置，里面的东西去掉 ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] https://github.com/sampotts/plyr#api
++ ，配置controls就可以控制需要的控制按钮
本人QQ-554433626 2017-06-09
  • 打赏
  • 举报
 回复
你自己控制添加删除类名plyr--hide-controls 就能控制显示隐藏控制条
波西尼尼 2017-06-09
  • 打赏
  • 举报
 回复
引用 1 楼 net_lover 的回复:
api里面有个controls设置，里面的东西去掉 ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] https://github.com/sampotts/plyr#api
我说错咯，是默认隐藏，但是鼠标移到视频上面，还是需要显示出来，鼠标移开又隐藏掉。就像现在视频播放过程中控制条的显示方式一样。
孟子E章 2017-06-09
  • 打赏
  • 举报
 回复
api里面有个controls设置，里面的东西去掉 ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] https://github.com/sampotts/plyr#api
在 html 中如何使用 plyr 组件
支持自定义的播放控制和 WebVTT 字幕。 一、Plyr 是什么？ Plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器。功能有以下几点：倍速设置、画中画模式、全屏显示等 可访问性 - 完全支持字幕和屏幕阅读器 轻...
video.js与plyr.js
播放器，自己也是花了点时间去比对研究这两个js库，中间也是遇到了各种各样的坑。以下是我对这两个js库的拙见 视频容器 之所以采用 div 来作为视频容器，还是由于后台的富文本编辑器需要 插入视频 和 预览...
分享一个开源免费、功能强大的视频播放器库
最近在开发一个前端项目，用到播放视频的功能，所以就查了下有什么前端的视频播放器库可以使用，今天来分享一下给大家。 这个库的名字叫做 Plyr，顾名思义其实就是 Player 的缩写，整体的预览效果如下： 官方网站：...
jquery关闭弹出层视频还在播放. 解决办法!
$(".video-hide video#sp").trigger("pause"); 或者直接$(".video-hide video").trigger("pause"); 其中 video 很重要 不然不行 转载于:https://www.cnblogs.com/weilianguang/p/11318477.html...
web前端网页插入视频的方法
在Web前端开发中，插入视频文件主要有两种标准方法，即使用HTML5的`<video>`标签和在必要时配合JavaScript或现代框架（如React、Vue等）进行更复杂的控制。- `<source>` 标签用于指定不同格式的视频源，浏览器会按...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章