video.js 使用方法 videojs参数
黎征
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">
类似资料：