官网源码需要package才能使用,文件下载路径。
https://pan.baidu.com/s/1lY8A5DZlBBFf5TgDPcgJCA
提取码:326t
实现播放器自动适应宽度,视频资源以参数形式添加。
<%@ page contentType="text/html; charset=utf-8" isELIgnored="false"%>
<html>
<link rel="stylesheet" type="text/css" href="/videojs/video-js.min.css"/>
<script src="/lhccvideoplayer/videojs/ie8/videojs-ie8.min.js"></script>
<script src="/lhccvideoplayer/videojs/video.js"></script>
<style>
.video-js .vjs-time-control{
display:block;
}
.video-js .vjs-remaining-time{
display: none;
}
</style>
<body>
<video id="example_video_1" class="video-js" controls preload="auto" data-setup="{}">
</video>
<script type="text/javascript">
$(function(){
var width=document.body.clientWidth;
var sourceUrl="http://127.0.0.1/1234.mp4";
var options = {
sources: [{
src: sourceUrl,
type: 'video/mp4'
}]
};
var player = videojs('example_video_1', options, function onPlayerReady() {
videojs.log('播放器已经准备好了!');
this.width(width);
});
})
</script>
</body>
</HTML>
在ie8下正常播放,需要在video.js配置一下video-js.swf文件的地址,代码如下
if (!options.swf) {
var ver = '5.4.1';
// options.swf = '//vjs.zencdn.net/swf/' + ver + '/video-js.swf';
options.swf ='/videojs/video-js.swf';
}