Video.js打造网页播放器(图文教程)
程序员文章站
2022-04-19 13:01:52
...
下面是我给大家整理的Video.js打造网页播放器,有兴趣的同学可以去看看。
1.第一步
<link href="video-js.css" rel="stylesheet" type="text/css"> <!-- video.js must be in the <head> for older IEs to work. --> <script src="video.js"></script>
2.第二步
<script> videojs.options.flash.swf = "video-js.swf"; </script>
3.第三步
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="480" data-setup="{}"> <source src="wangdeshun.mp4" type="video/mp4"/> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video>
4.第四步
<script> var player = videojs("example_video_1"); // 检测播放时间 player.on('timeupdate', function () { console.log('当前播放时间:' = player.currentTime()); } }); // 开始或恢复播放 player.on('play', function() { console.log('开始/恢复播放'); }); // 暂停播放 player.on('pause', function() { console.log('暂停播放'); }); /在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> setTimeout(function(){ player.pause(); },10000); </script>
这样就可以播放网络视频了。是不是很方便。
检测视频是否播放完毕
player.on('timeupdate', function () { // 如果 currentTime() === duration(),则视频已播放完毕 if (player.duration() != 0 && player.currentTime() === player.duration()) { // 播放结束 } });
如果是手机使用 需要
在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
上面是我整理给大家的Video.js打造网页播放器,希望今后会对大家有帮助。
相关文章:
如何在Javascript中自动将输入的数字转化成货币格式(代码附上)
js原生代码实现数据双向绑定(可以直接拿来使用,已经封装好了)
以上就是Video.js打造网页播放器(图文教程)的详细内容,更多请关注其它相关文章!
推荐阅读
-
Windows如何安装Mac任务栏 Windows打造Mac任务栏图文教程
-
led player6.0怎么用 led液晶显示屏播放器LED Player图文使用教程
-
Win8系统开机弹出网页bing的原因分析及2种解决方法图文教程
-
host文件修复 因host文件被修改打不开网页的解决办法(图文教程)
-
Win10系统打开网页提示SSL连接错误的原因及解决方法图文教程
-
安捷播放器如何设置看片 安捷播放器设置看片、下载、播放图文教程
-
打造廉价显微摄影的方法图文教程详解
-
呆呆播放器怎么看大片 呆呆播放器使用图文教程
-
怎么提取迅雷播放器的exe资源图文教程
-
网页flash下载 如何下载网页中的flash SWF文件(图文教程)