解决video在ios中播放自动全屏问题

前言：当video在ios上面点击播映会主动全屏播映，这个体验有点欠好，因为上面有全屏播映提示，假如用户真的需求全屏能够自己点击全屏播映按钮，所以需求制止video在ios体系主动全屏播映。

一、处理

ios中：

只需求在标签里面写上：webkit-playsinline=’true’    playsinline=’true’

android中：

android端部分视频也会存在主动全屏问题，增加：x5-video-player-type=”h5-page”

二、延伸：

1、标签定义：

<video> 标签定义视频，比如电影片段或其他视频流，能够放置视频资源，并增加视频控件。

支持的浏览器：Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。

注：Internet Explorer 8 以及更早的版本不支持 <video> 标签。

eg：

<video controls="controls" src="images/video.mp4"  id="Video" poster="images/vImg.jpg" preload="auto" loop="true" width="100%" height="auto" webkit-playsinline='true'  playsinline='true' ></video>

2、video特点：

特点名	详细介绍
src	要播映的视频的 URL
poster	视频封面；没有播映时显现的图片，规则视频正在下载时显现的图画，直到用户点击播映按钮。
preoad	预加载。假如呈现该特点，则视频在页面加载时进行加载，并预备播映。假如运用 “autoplay”，则疏忽该特点。
autoplay	主动播映；视频在安排妥当后马上播映。
loop	假如呈现该特点，则当前言文件完成播映后再次开始播映。
muted	假如呈现该特点，视频的音频输出为静音。
controls	假如呈现该特点，则向用户显现控件，比如播映按钮，浏览器自带的操控条
width	设置视频播映器的宽度
height	设置视频播映器的高度

3、poster的详细介绍：

poster 特点规则视频下载时显现的图画，或者在用户点击播映按钮前显现的图画。所有干流浏览器都支持 poster 特点。

假如未设置该特点，则运用视频的第一帧来代替。

注：测试了一下，android若设置该特点但未设置图片，是会显现第一帧，但ios不可，会显现空白

所以假如需求显现视频封面且适配俩端，不能只写  <video  poster> </video>，需求指定封面图片：<video  poster=‘url’> </video>

其间 url值 描述URL指定图片文件的URL。可能值：

绝对URL – 指向另外一个站点URL (如：href=”juejin.im/post/728380…)

相对URL – 指向同个站点的URL (如： href=”juejin.im/post/728380…)

eg:

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

获取视频第一帧作为封面

  var url =
        "https://studythailand.sasin.edu/topkeeoss/609721280303861760-public/MP4/Xuan Li EMBA2022.mp4"
      var resolve = getVideoBase64(url)

      resolve.then((dataURL) => {
        // console.log("dataURL:", dataURL)
        img.src = dataURL
        pittle.poster = dataURL
      })
      function getVideoBase64(url) {
        return new Promise(function (resolve, reject) {
          var dataURL = ""
          const video = document.createElement("video")
          video.setAttribute("crossOrigin", "anonymous") //处理跨域
          video.setAttribute("src", url)
          // video.setAttribute("width", 400)
          // video.setAttribute("height", 400)
          video.setAttribute("autoplay", true)
          video.setAttribute("muted", true)
          video.setAttribute("preload", "auto") // 就是加上预加载之后绘制就成功了
          video.setAttribute("playsinline", "") // 在微信内置浏览器中播放

          // video.addEventListener("loadeddata", () => alert("loadeddata")) // 当前帧加载完毕
          // video.addEventListener("loadedmetadata", () =>
          //   alert("loadedmetadata"),
          // ) // 视频元数据加载完毕
          // video.addEventListener("canplay", () => alert("canplay")) // 视频缓冲能够开始播放
          // video.addEventListener("timeupdate", () => alert("timeupdate")) // 播放位置发生改变时
          // video.addEventListener("play", () => alert("play")) // 开始播放时
          // video.addEventListener("waiting", () => alert("waiting")) // 要播放下一帧而需要缓冲时

          // alert("loadeddata start")
          video.onload = function () {
            console.log(video.width, video.height)
          }
          video.addEventListener("loadeddata", function () {
            // alert("loadeddata")
            console.log(video.width, video.height)
            var canvas = document.createElement("canvas"),
              width = video.width, //canvas的尺寸和图片一样
              height = video.height

            canvas.width = width
            canvas.height = height
            canvas.getContext("2d").drawImage(video, 0, 0, width, height) //绘制canvas
            dataURL = canvas.toDataURL("image/jpeg") //转换为base64
            resolve(dataURL)
          })
        })
      }