在响应式网页开发中 object-fit 属性是极为常用的一个css属性，遗憾的是IE浏览器全系列都不支持 object-fit 属性，但是可以借助bideo.js插件实现 IE10 和 IE11 对 object-fit 的支持。

PS：不支持 IE9 和 Edge

插件下载：https://github.com/rishabhp/bideo.js

插件使用

HTML代码：

<!-- 引入插件 -->
<script src="bideo.js"></script>
<!-- 插入视频 -->
<video id="video" src="video.mp4" autoplay loop muted></video>

CSS代码：

#video {
	position: absolute;
	top: 0; 
	left: 0;  
	object-fit: cover;
	height: 100%; 
	width: 100%;
}

js代码：

(function () {
	var bv = new Bideo();
	bv.init({
    // 获取视频元素
    videoEl: document.querySelector('#video'),

    // 获取容器元素
    container: document.querySelector('body'),

    // 是否使用响应式 
    resize: true,
	
	// 是否自动播放，可以在video标签里使用，也可以在这里使用参数
    // autoplay: false,

	// 是否支持移动端，可自定义max-width
    isMobile: window.matchMedia('(max-width: 768px)').matches,
	
	// 播放暂停按钮
    //playButton: document.querySelector('#play'),
    //pauseButton: document.querySelector('#pause'),

    // 一个对象数组，添加不同格式的视频src和type，也可以直接在video标签里添加
    //src: [
		//{
			//src: 'night.mp4',
			//type: 'video/mp4'
		//},
		//{
			//src: 'night.webm',
			//type: 'video/webm;codecs="vp8, vorbis"'
		//}
	//],

    // 视频封面，加载完成后隐藏
    //onLoad: function () {
		//document.querySelector('#video_cover').style.display = 'none';
    //}
  });
}());

完成！

本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。