本文目录一览:
- 1、如何让video.js 支持AVI、RMVB
- 2、video.js怎么改音量条的方向
- 3、在IE11中使用vediojs在线观看视频无法观看,flash插件已经更新启用,急求解决办法
- 4、vediojs嵌入到web项目中的问题
如何让video.js 支持AVI、RMVB
video.js是基于H5开发的,所以只支持以下三种格式:
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
所以,建议使用格式工厂软件去转换一下格式,转换成MP4格式。
转换步骤:
1.根据文件类型选择文件
2.点击输出设置
3.选择下图格式
大功告成了!
video.js怎么改音量条的方向
在页面中引用video-js.cs样式文件和video.js
link href="video-js.css" rel="stylesheet" type="text/css" script src="video.js"/script
设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件
script videojs.options.flash.swf = "video-js.swf"; /script
html
poster="**"播放初始图。可使用三种视频格式,根据所需要格式选择对应的。
video id="example_video1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="" data-setup="{}"
source src="http://视频地址格式1.mp4" type='video/mp4' /
source src="http://视频地址格式2.webm" type='video/webm' /
source src="http://视频地址格式3.ogv" type='video/ogg' /
track kind="captions" src="demo.captions.vtt" srclang="en" label="English"
/track
!-- Tracks need an ending tag thanks to IE9 --
track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"/track!-- Tracks need an ending tag thanks to IE9 --
/video
设置自动播放将下面代码加到html中代码后面
script type="text/javascript" var myPlayer = videojs('example_video1'); videojs("example_video1").ready(function(){ var myPlayer = this; myPlayer.play(); }); /script
在IE11中使用vediojs在线观看视频无法观看,flash插件已经更新启用,急求解决办法
下载谷歌等浏览器测试一下,如果好用,看视频、上淘宝、OO空间,或浏览其它网页时就用这个软件,这些都是不用IE做内核的,与你用IE不冲突(有时是浏览器不好用引起的,我是从实践中从多个浏览器中挑出来的,这个浏览器很著名,因为不容易崩溃,因为每个网页出问题不会影响整个浏览器,有问题请你追问我)。
vediojs嵌入到web项目中的问题
方法/步骤
1
在网页中使用HTML5视频嵌入技术最大的优点就是不需要任何第三方插件(比如 Adobe公司的Flash)就能播放。
不需要第三方插件带来的好处就是资源占用更少,想想如果一个网站上嵌入好多flash那该有多慢啊,还好有HTML5视频嵌入技术可以完好地解决这个问题。
那么它的配置复杂吗?很简单!
2
首先下载video.js,百度一下就能找到。
3
这个是下载后的目录。
4
先把要用到的js\css\swf都加载到html页面上。
如:
link href="video-js/video-js.css" rel="stylesheet" type="text/css"
script src="video-js/video.js"/script
script
videojs.options.flash.swf = "video-js/video-js.swf";
/script
5
加入下面的代码:
video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto"width="640"height="480"poster="video-js/my_video_poster.png" data-setup="{}"
source src="Wildlife.mp4" type='video/mp4'
/video
只要记住:修改width="640" height="480"来改变视频显示大小,修改src="Wildlife.mp4"来改变要显示的视频。
然后打开html文件查看效果吧,它有暂停、音量控制、全屏等功能,还有好多其他功能,比如字幕等,这个以后再写。
全屏后的效果:
下面看看各个浏览器的效果:
Firefox:
Chrome:
360:
IE:
可以看到,IE播放是有问题的。解决IE不能播放的问题很简单。
加入:
script
if (navigator.userAgent.indexOf('MSIE') = 0){
document.getElementById("videoDiv").innerHTML='embed src="Wildlife.mp4" autostart="true" loop="true" width="640" height="480" ';
}
/script
意思是:如果是IE浏览器就将视频替换为传统的以FLASH形式播放。
再看看效果,呵呵,好了。
下面附全部代码截图,纯代码发上来不显示,没办法了。