|
代码如上，poster属性用于设置视频封面；视频链接放在source标签内的src属性；加controls属性就会展示控制栏，不加不显示；
height：100%；
width：100%；
object-fit:cover；
视频进入网页自动播放
查阅资料都是说在vedio属性中加 autoplay="autoplay" muted='muted'，如第一段代码，但是我试了都是被浏览器评屏蔽掉的（为了提高用户体验，浏览器不允许自动播放事件，除非用户自己做了点击播放事件）， 在强制刷新时，才会自动播放，网页刚进入并不会播放，我也尝试了triggle事件去自动触发点击事件也不行，以下是能够成功自动播放的代码
var myVideo=document.getElementById("video");
myVideo.muted=true
myVideo.play();
在js里面定义muted，然后触发play()
播放结束后的封面
myVideo.onended = function() {
$(".endimg").show()
};
视频播放暂停
$(".start").click(function(){
var myVideo=document.getElementById("video");
if (myVideo.paused) {
myVideo.play();
}else {
myVideo.pause();
}
})
视频触发全屏
function launchFullscreen(element){
//此方法不可以在異步任務中執行，否則火狐無法全屏
if(element.requestFullscreen) {//浏览器兼容
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else if(element.oRequestFullscreen){
element.oRequestFullscreen();
} else if(element.webkitRequestFullscreen){
element.webkitRequestFullScreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('video');
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
document.IsFullScreen = true;
}
}
//应用
var myVideo=document.getElementById("video");
launchFullscreen(myVideo);
|