首页 > 其他分享 >video视频播放,安卓和IOS差异

video视频播放,安卓和IOS差异

时间:2022-10-19 14:14:14浏览次数:88  
标签:视频 const videoItem 安卓 IOS videoList video 播放

IOS默认播放大屏播放,安卓播放可以同时播放多个,因为IOS默认是大屏播放所以不存在同时播放多个视频的现象。

需求1、安卓一次播放一个视频,播放一个其中一个停止播放。

    const videoList = document.getElementsByTagName("video");
    const videoArr = Array.from(videoList);
    if (videoList.length) {
      for (const videoItem of videoArr) {
        videoItem.addEventListener('playing', function (e) { //播放中
         const videoList = document.getElementsByTagName("video");
          const videoArr = Array.from(videoList);
          for (const videoItem of videoArr) {
            if(videoItem !== e.target){
              videoItem.pause();
            }
          }
        });
      }
    }

 

需求2、IOS停止默认播放大屏。

playsinline

webkit-playsinline="true"

H5端:

iOS10以上H5视频不自动全屏播放识别 playsinline这个属性
iOS10以下H5视频不自动全屏播放识别 webkit-playsinline这个属性

 

标签:视频,const,videoItem,安卓,IOS,videoList,video,播放
From: https://www.cnblogs.com/swt-axios/p/16806021.html

相关文章

  • iOS input 以及textarea失去焦点 无法进行输入
    百度了大部分的方法都不行后续通过跟朋友一起试验/*在css中对应的input以及textarea下添加*/input,textarea{-webkit-user-select:auto!important;}iOSi......
  • 由于FFmpeg的amerge滤镜导致的iOS中无法载入视频
    amerge引发的问题一段视频,在合成后可能需要增加一段背景音乐来烘托气氛。然而在使用amerge进行混音时,如果不小心会出现问题。例如将合成好的视频通过AirDrop发送到iOS(因为......
  • 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制
    第三期·使用Vue3.1+TailWind.CSS+Axios+Golang+Sqlite3实现简单评论机制效果图CommentArea.vue我们需要借助js的Data对象把毫秒时间戳转化成UTCStrin......
  • vue之axios
    什么是axios?Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。特性1从浏览器中创建XMLHttpRequests2从node.js创建http请求3支持PromiseAPI4......
  • uniapp 使用video控制视频未学完部分不能跳转
    思路:每次进入视频播放页面获取视频的总长度提交至后台(使用video标签中的 loadedmetadata方法可以获取到,下面代码有使用,这个是作为提供给后台存数据库作为播放百分比的,......
  • 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制
    第三期·使用Vue3.1+Axios+Golang+Sqlite3实现简单评论机制效果图CommentArea.vue我们需要借助js的Data对象把毫秒时间戳转化成UTCString()。并在模板......
  • 解决ios设备软键盘弹出导致页面整体被顶起
    问题ios设备:点击input,软键盘弹出,页面整体向上偏移需求当软键盘弹起,input改变位置并始终贴着软键盘,整体页面不上移动解决页面采用flex布局<divclass="flex"><d......
  • mui组件导致ios设备无法让input获取焦点
    问题页面使用了mui组件,其中有个input标签。在IOS,macOS设备上无法通过点击让input框获得焦点,导致无法输入。原因mui.css中有个样式,让页面内容无法被选中,影响了input获取......
  • iOS Block
    http://events.jianshu.io/p/94db362acb97  Block的分类Block有三种类型:全局Block,堆区Block,栈区Block全局Block当Block没有引用到局部变量时或者Block里面使用的......
  • axios : Promise based HTTP client for the browser and node.js
    axiosPromisebasedHTTPclientforthebrowserandnode.jsFeaturesMake​​XMLHttpRequests​​fromthebrowserMake​​http​​requestsfromnode.jsSupportsthe......