如何让video.js 支持AVI、RMVB

JavaScript015

如何让video.js 支持AVI、RMVB,第1张

video.js是基于H5开发的，所以只支持以下三种格式：

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

所以，建议使用格式工厂软件去转换一下格式，转换成MP4格式。

转换步骤：

1.根据文件类型选择文件

2.点击输出设置

3.选择下图格式

大功告成了！

具体两种解决方法如下：第一种：1，Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，2，如果不支持 HTML5 则自动使用 Flash 播放器。第二种：1，通过使用原生的video标签，然后再属性中没用使用controls属性，2，然后再自己百度了暂停、播放、全屏、播放进度的代码，然后添加上去即可。

1.第一步

[html] view plain copy

<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.第二步

[javascript] view plain copy

<script>

videojs.options.flash.swf = "video-js.swf"

</script>

3.第三步

[html] view plain copy

<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.第四步

[javascript] view plain copy

<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>

这样就可以播放网络视频了。是不是很方便。

检测视频是否播放完毕

[javascript] view plain copy

player.on('timeupdate', function () {

// 如果 currentTime() === duration()，则视频已播放完毕

if (player.duration() != 0 && player.currentTime() === player.duration()) {

// 播放结束

}

})

如果是手机使用 需要

[html] view plain copy

在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">