video标签在iOS上无法自动播放解决办法

最新推荐文章于 2025-02-20 07:21:25 发布

小破孩呦

最新推荐文章于 2025-02-20 07:21:25 发布

阅读量1.4w

点赞数 10

分类专栏： Vue总结

本文链接：https://blog.csdn.net/qq_38543537/article/details/106385932

版权

Vue总结专栏收录该内容

55 篇文章

订阅专栏

本文介绍如何解决iOS设备上使用video.js时自动播放的问题，通过添加特定属性使视频在iOS端正常自动播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于项目中的视频较大所以使用了video.js，安装方法如下：

npm  install video.js

使用方法在main.js中配置如下：

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

页面使用如下：

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered video"
       muted autoplay preload loop
       poster="../assets/images/video.jpg"
>
    <source src="../../public/about.mp4" type="video/mp4" >
</video>

使用如上方法之后在其他端都可正常播放，只有iOS没办法自动播放，于是就Google开始寻找方法

最后找到方法如下：

<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/about.mp4" type="video/mp4" >
</video>

在video标签上添加如下即可：

x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline

以上测试有效！！！

<video>的基本属性：

　　preload: （预加载）iPhone支持，Android不一定支持;

　 poster: （封面图片）iPhone支持，Android不一定支持;

　　autoplay: （自动播放）iPhone中的Safari不支持，webview可能被开启。Android不一定支持；

　　loop: （循环播放）iPhone支持，Android不一定支持;

　　controls: （控制条）iPhone支持，大师需要开始播放了才显示，Android基本支持;

　　width: （宽度）;

　　height: （高度）;

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