html video自动播放-解决html5中嵌入视频手动播放问题

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

H5页面嵌入视频的案例有很多。 有时您会遇到需要手动播放的情况。 以前我并不认为这是一个问题，但是当你自己的项目中需要视频时，就有点马虎了，无法实现。 老板的要求，很紧急

H5页面嵌入视频的案例有很多。 有时您会遇到需要手动播放的情况。 以前我并不认为这是一个问题html video自动播放，但是当你自己的项目中需要视频时，就有点马虎了，无法实现。 老板的要求好紧急啊~~~

查找各种资料，找到方法，记录下来。 核心就是监听canplaythroughstorm，然后让视频自己play()。

在这个过程中，我也发现了iOS和Android的不同。 Android需要设置静音才能手动播放，但iOS没有这个限制。 当然，厂商还在调整新的多媒体播放政策，需要大家关注。

另外，有时视频也可能出现问题，导致无法手动播放。 我以前也遇到过这个坑（在iPhone 8 plus和Android上运行正常，但在iPhone上无法手动播放视频的问题，真是可惜。

这里我也区分一下Android和iOS，因为Android的全面屏不仅丑，而且在第二阶段，你会直接返回，而不是退出视频，而是退出页面。 这太操蛋了 iOS的视频非常好，系统有自己的操作按钮。

所以Android上取消了所有控制按钮，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"
        >
          
 
        
　　videoLoaded(){
　　　　this.$refs.videoEle.play();
　　}

说到视频，还有一个问题。 我以前遇到过html video自动播放，就是切换不同标签后切换视频。 我发现在源上写视频路径和以前一样有问题。 直接在视频上写出连接，如下所示：

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

这篇关于解决html5中嵌入视频手动播放问题的文章到此结束。 更多关于html5中嵌入视频手动播放的内容，请搜索易盾网络之前的文章或者继续浏览下面的相关文章。 希望大家以后多多支持易盾网络！