video.js 5.x 播放视频，支持ie8

最新推荐文章于 2021-03-12 22:27:23 发布

KingOfNorth

最新推荐文章于 2021-03-12 22:27:23 发布

阅读量1.7k

点赞数

文章标签： videoJS

本文链接：https://blog.youkuaiyun.com/KingOfNorth/article/details/85679824

版权

本文介绍了一个能够自动适应浏览器宽度的HTML5视频播放器实现方案，通过JavaScript动态设置播放器宽度，并提供了在IE8环境下正常播放的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网地址

官网源码需要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';
    }