html5中嵌入视頻全自动播发的难题处理

日期：2021-01-19 类型：科技新闻 

关键词：制作小程序，小程序商城，扫码点餐小程序，微信小程序开店的步骤，牛刀小程序

在H5网页页面中嵌入视頻的状况是较为多件的，有时会碰到必须全自动播发的状况，以前压根感觉这并不是难题，可是自身的新项目中必须视頻的情况下就有点sb了，达不到老板的规定，那个急呀~~~

各种各样查材料，寻找1个方式，纪录1下。关键是监视了canplaythrough恶性事件，随后自身去让视頻play()。

在这个全过程中还发现，ios和安卓系统不1样，安卓系统上必须设定muted才可以全自动播发，ios没这个限定，自然，多新闻媒体播发政策呢，厂商也1直在调剂，必须关心。

也有便是有时视頻也将会有难题，致使不可以全自动播发，以前便是碰到了这个坑（在iphone8 plus,安卓系统上一切正常，可是在iPhone X，XR上不可以全自动播发），调了半天不好，最终发现视頻的难题，日了狗了，

我这里还区别了安卓系统和ios，由于安卓系统全屏不但丑，2期你立即回到呢并不是撤出视頻，而是撤出网页页面了，这个很蛋疼，ios的视頻就挺好的，系统软件自带有实际操作按钮

因此安卓系统上撤销了全部的操纵按钮，ios就放宽了按钮

<video v-show="os!=='iOS'"
               class="video"
               preload="auto"
               autoplay
               loop muted
               webkit-playsinline="true"
               playsinline="true"
               @loadstart="videoLoadStart"
               @canplaythrough="videoLoaded"
               poster="./images/cover.png"
               ref="videoEle"
               id="android"
        >
          <source :src="src" type="video/mp4">
 
        </video>
　　videoLoaded(){
　　　　this.$refs.videoEle.play();
　　}

说道视頻，也有1个难题，以前碰到过，便是切换不一样的tag随后切换视頻，发现吧视頻相对路径写在source里边，就像上面那样是有难题的，立即把联接写在video里边，就像下面这样：

<video ref="video"  id="video" preload="metadata" :src="videoSrc[videoIndex]" :poster="preSrc[videoIndex]" webkit-playsinline playsinline>
</video>


data(){
preSrc:[
  require("./images/pre1.png"),
  require("./images/video-pre.jpg")
],
videoSrc:[
  require("./images/invader-video.mp4"),
  require("./images/brithday.mp4")
],

}

到此这篇有关html5中嵌入视頻全自动播发的难题处理的文章内容就详细介绍到这了,更多有关html5嵌入视頻全自动播发內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：手机微信小程序流程开发设计提升周边作用，使 返回下一篇：没有了