在响应式网页开发中 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';
//}
});
}());
完成!
