由于项目中的视频较大所以使用了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属性

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue