如何阻止IOS播放时自动全屏

之前有朋友想要一个影视站来看电影方便些,搞了一个影视站,发现有很多问题,也一直在缝缝补补,问题越来越多迫不得已只能停掉了,其中的一个问题就是iOS播放时会自动进入全屏播放,最初我以为是播放器的问题,于是又找了很多播放器外链引用都无济于事,直到最近我才找到了根本解决办法,希望对您也有帮助~

步入正题,目前就掌握了两种解决方案(文末附带其他解决思方案)。

第一种:无封面图

<video width="320" height="240" controls playsinline>
  <source src="视频链接" type="video/mp4">
</video>

只需将"视频链接"更改为你的视频文件的URL。如果你的视频文件是.mp4格式,那么"type"属性应为"video/mp4"。如果你的视频是其他格式,例如.webm.ogg,那么应将"type"属性更改为对应的MIME类型,比如"video/webm"或者"video/ogg"。这段代码需要在HTML的body部分插入到你想要的位置。playsinline属性就是告诉iOS设备在非全屏模式下播放视频。

第二种:有封面图(但所有视频封面图唯一,所以我选择的是全黑图片。)

解决方案是使用CSS来给video标签添加背景,这样当封面图不能填满video容器时,背景色会被看到。请在网站的CSS文件或者<style>标签中添加如下规则:

video {
    background: black url('封面图片链接') no-repeat center center;
    background-size: cover;
}

然后把以下代码插入到你想要的位置。(格式、属性规则与第一种相同。)

<video width="320" height="240" controls="" playsinline="">
  <source src="视频链接" type="video/mp4">
</video>

上方是简单的实现方案,在实际生产环境中肯定是不可取的,于是有了下面截取视频中第几帧作为视频封面,方案来自CSDN和阿里云。(还在学习中)下方教程来源于:https://blog.csdn.net/qq_43886365/article/details/131722464

需求如下

移动端h5页面(微信浏览器下)需要上传视频并回显封面,用户点击中间的播放三角可以进行视频的预览;问题就出现在ios手机上使用video的poster属性并不能显示出视频封面,而安卓手机可以正常显示视频的第一帧;

效果图


问题分析:

在ios系统中有个保护机制, 如果video标签未开始播放, 是不会去加载视频的.

所以也就是说, video标签还未去加载视频, 就显示不出来视频首帧画面;

把video标签加上autoplay(自动播放)属性和muted(静音)属性, 就正常看到视频的画面了;

要想在video标签中显示首帧画面, 需要添加poster属性, 属性值应该是图片的url;或者直接使用img标签替代video的位置,当点击播放的时候再弹层展示需要播放的视频;

接下来就是怎么获取到视频首帧的图片的url;

视频截帧

在ios上面为了能够获取到视频的首帧,需要在生成video标签的时候添加上autoplay属性和muted属性;否则你截出来的是白屏;

代码如下:

第一种方式

/**
   * 获取视频的第一帧 来当做封面  在ios上面会可能会出现截出黑色的情况
   * @param url 视频的url 可以是一个由window.URL.createObjectURL返回的视频内存临时地址(推荐使用)
   */
  export function getFirstImg(url) {
    return new Promise(function (resolve, reject) {
      try {
        let dataURL = '';
        let width = '90'; // 单位是px
        let height = '90';
        let listen = 'canplay';//需要监听的事件
  
        let video = document.createElement('video');
        let canvas = document.createElement('canvas');
        //使用严格模式
        ('use strict');
        video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
        video.setAttribute('src', url);
        video.setAttribute('width', width);
        video.setAttribute('height', height);
        video.currentTime = 1; // 第一帧
        video.preload = 'auto'; //metadata:抓取原数据
         //判断IOS 监听 durationchange或progress  但是在ios会出现黑屏
        if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
          video.load();
          video.autoplay = true;
          video.muted = true; //静音
          listen = 'loadeddata';
        }
        // 第二版 dataLoad
        video.addEventListener(listen, () => {
          console.log("我走了");
          canvas.width = width;
          canvas.height = height;
          canvas.getContext('2d').drawImage(video, 0, 0, width, height); //绘制canvas
          dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
          resolve(dataURL);
        });
      } catch (error) {
        console.log('视频截帧的失败报错:', error);
      }
    });
  }

第二种方式

export function getFirstImg(url) {
  const video = document.createElement("video");
  video.crossOrigin = "anonymous"; // 允许url跨域
  video.autoplay = true; // 自动播放
  video.muted = true; // 静音
  video.src = url;
  return new Promise((resolve, reject) => {
    try {
      video.addEventListener(
        "loadedmetadata",
        () => {
          console.log("loadedmetadata");
          video.currentTime = 2;
          const canvas = document.createElement("canvas");
          video.addEventListener("canplaythrough", () => {
            console.log("canplaythrough");
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas
              .getContext("2d")
              .drawImage(video, 0, 0, canvas.width, canvas.height);
            const firstFrame = canvas.toDataURL();
            // console.log(firstFrame); // 输出第一帧画面的Base64编码字符串
            resolve(firstFrame);
          });
        },
        { once: true }
      );
    } catch (err) {
      console.error(err);
      reject("");
    }
  });
}

前端来获取视频首帧终究不是上上策,因为前端处理视频,就需要视频加载这个过程,如果页面上有很多视频,那访问这样页面,岂不是要偷偷浪费用户流量来加载;


利用视频的自动播放和暂停来获取视频的首帧

上面的这种是视频截帧的方式在ios上创造video节点且需要设置视频自动播放;并使用cavans绘制第一帧的图像并返回base64;

既然这么麻烦,为啥不本来就让他自动播放,并在播放到100-200毫秒的时候主动暂停视频呢;这样也可以达到视频截帧的效果,而且代码也比较简单监听视频的canplay事件并在里面暂停视频;如下:

vue中template里面的处理

<video autoplay muted playsinline preload="auto" :src="filePreviewObj.fileUrl" @canplay="canplay($event)" /> 

canplay方法的处理

/* 视频播放 获取第一帧 */
canplay(event){
  setTimeout(() => {
    event.target.pause(); // 暂停播放视频 以此来获取封面
  }, 200);
};

这种方式大家可以去试一下,亲测有效;

视频截帧的其他方式

其实上传文件,现在最流行的不是bos就是oss

1,BOS:百度云对象存储

官方链接:https://cloud.baidu.com/doc/BOS/s/Yl06cyatz

使用如下:直接在视频的原链接后面拼接字符串即可

处理的视频URL为:<原视频URL>?x-bce-process=video/snapshot,t_7000,f_png,w_800,h_600,m_fast

2,OSS:阿里云对象存储:

官方链接: https://help.aliyun.com/document_detail/64555.html

参数 描述 取值范围

t 指定截图时间。如果设置的截图时间t超过了视频时长,则返回视频的最后一帧关键帧。 [0,视频时长]
单位:ms

w 指定截图宽度,如果指定为0,则自动计算。 [0,视频宽度]
单位:像素(px)

h 指定截图高度,如果指定为0,则自动计算;如果w和h都为0,则输出为原视频宽高。 [0,视频高度]
单位:像素(px)

m 指定截图模式,不指定则为默认模式,根据时间精确截图。如果指定为fast,则截取该时间点之前的最近的一个关键帧。 枚举值:fast

f 指定输出图片的格式。 枚举值:jpg和png

使用示例:

原视频链接:https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/video.mp4

使用fast模式截取视频7s处的内容,输出为JPG格式的图片,宽度为800,高度为600。

处理后的URL为:https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/video.mp4?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast

消息盒子

# 暂无消息 #

只显示最新10条未读和已读信息