您现在的位置是:网站首页 >> 网站技术
网站技术

联 系 人:李总
联系电话:13759574266
在线 QQ:89417157
邮箱:13759574266@qq.com
微信号:ynlongtou
地址:昆明市滇缅大道旁昆建路5号108智库空间A座4楼

网站技术

PC端和移动端都支持视频video自动播放的代码

  视频上传后自动视频的代码如下

  <video class="edui-upload-video  vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="/public/uploads//video/20230314/1584690225630534.mp4" data-setup="{}">

  <source src="/public/uploads//video/20230314/1584690225630534.mp4" type="video/mp4"/>

  </video>

  最大的问题就是无法自动播放,并且限定了视频宽和高,原本竖形的视频变成了横形视频,只在中间一块播放,另外就是在为手动点播放,未播放时无法加载视频宽高、封面图、播放时间等信息,那么就需要解决这个问题。

  自动播放及自适应大小代码实现

  PC端相应简单些,浏览器对<video>标签的兼容还是很好的,但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现;

  <video muted autoplay="autoplay" loop="loop" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" >

  <source src="indexMove.mp4" type="video/mp4">

  </video>

  同上面方法设置后,PC网页就可以实现自动播放了。

  移动端,好像这个代码也可以实现,至少IOS13.4的safari浏览器可以那就先这样吧。