最近写一个简单的项目使用到了video标签发现成品在ios和安卓机效果不一样,安卓机默认播放,ios不会默认播放,查了一些资料解决办法如下:
vue项目,首先线检测一下设备是ios还是Android,如果是ios的话监听一下给他播放
此外需要引入

 <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

在这里插入图片描述
然后页面我用v-if判断的

<video
          id="video"
          v-if="isAndroid == true"
          width="100%"
          height="100%"
          preload="auto"
          type="video/mp4"
          object-fit='fill'
          controls='controls' autobuffer
          autoplay
          webkit-playsinline="true"
          playsinline="true"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="portraint"
          x5-playsinline="true"
          :src="videoSrc"
        ></video>
        <video
        id="video"
        v-if="isIOS == true"
        width="100%"
        height="100%"
        type="video/mp4"
        object-fit='fill'
        controls
        autoplay
        autobuffer
        preload="auto"
        webkit-playsinline
        playsinline="true"
        :src="videoSrc"
      ></video>

这样在去尝试一下ios就可以自动播放了。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐