video视频标签一些设置，包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了video视频标签一些设置，包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<video  id="video" autoplay="autoplay" muted='muted' controls="controls" poster="../../img/newIndexImages/images/indexifrstpost.png">
	<source src="img/resource/2019/ptxd/lbdjzz.mp4" type="video/mp4">
</video>

代码如上，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()文章来源地址https://www.toymoban.com/news/detail-544743.html

播放结束后的封面

 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);

到了这里，关于video视频标签一些设置，包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！