video标签不能自动播放的原因

Posted 2023-04-11 我脾气呢

复习一下video标签重要的属性吧~

• src 要播放的视频的 URL。
• autoplay 如果出现该属性，则视频在就绪后马上播放。
• controls 如果出现该属性，则向用户显示控件，比如播放按钮，进度条等。
• height 设置视频播放器的高度。
• width 设置视频播放器的宽度。
• autoplay 如果出现该属性，则视频在就绪后马上播放。 controls 如果出现该属性，则向用户显示控件，比如播放按钮,进度条等。
• loop 如果出现该属性，视频播放结束会再次播放，即循环播放。
• muted 静音播放。
• poster 视频的封面图。
• preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，该属性无效。

video不能自动播放的原因：

未加autoplay属性，或者autoplay属性为false
有的浏览器不允许非静音自动播放，如谷歌浏览器，所以要加上muted属性，才会自动播放

解决微信video全屏的问题，不在本页面播放

在微信浏览器中使用video标签，点击播放会跳出本页面，自动进行全屏播放，原因是自动跳转到手机微信内置的浏览器中去播放去了!!!

在video中加上连个属性就好了，反正最近的一个项目，我是这样做的就好了，

　　

 <video id="videoID"webkit-playsinline="true" x-webkit-airplay="true"  playsinline="true"x5-video-player-type="h5"x5-video-player-　　　　　　fullscreen="true"width="100%" height="100%"preload="auto"  poster="" src="">

 </video>

 

其中最主要的是两个东西，一个是webkit-playsinline="true"这个 ，本来我的video在ios中 是跳全屏播放的，加了一个这样的属性就不跳了，

但是安卓微信里面，又开始自动跳全屏播放了，后来我又加了一个这样的属性x-webkit-airplay="true"  安卓也好了，很神奇，如果你遇到类似的问题可以去试试，或许会好的呢！！