当前位置:首页|资讯

如何使H5中的video标签优雅的尽可能的自动播放视频

作者:鹏程wan里LaA发布时间:2024-09-27

*注:对于引用了vide.js播放器插件的也适用

废话不多时,直接上代码:

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered video"
    muted autoplay preload loop
    x5-video-player-fullscreen="true"
    x5-playsinline
    playsinline
    webkit-playsinline
    poster="../assets/images/video.jpg"
>
  <source src="../../public/yourvideo.mp4" type="video/mp4" >
</video>

<video>的基本属性:

preload: (预加载)iPhone支持,Android不一定支持;
poster: (封面图片)iPhone支持,Android不一定支持;
autoplay: (自动播放)iPhone中的Safari不支持,webview可能被开启。Android不一定支持;
loop: (循环播放)iPhone支持,Android不一定支持;
controls: (控制条)iPhone支持,大师需要开始播放了才显示,Android基本支持;
width: (宽度);
height: (高度);

有时候在微信网页端插入<video>标签的时候,不希望用户来拖动进度条的话,可以直接使用 playsinline属性,webkit-playsinline属性

*感谢关注,作者会不定时更新



Copyright © 2024 aigcdaily.cn  北京智识时代科技有限公司  版权所有  京ICP备2023006237号-1