h5 video 视频播放开发 和 问题集合

1.h5 video支持的格式

一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。

image

重点：比如MP4格式，MP4只是一个容器，里面还有一个叫编码器的东西。格式虽然都是MP4但是html中只支持H.264的编码格式。所以要用软件来转码。
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

2.h5 video视频添加封面图片

<video poster="images/spbg.jpg" src="about.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>

补充：有时会出现视频封面无法铺满的情况，需要使用object-fit属性铺满整个屏幕

3.h5 video标签屏蔽下载按钮和取消右键菜单

<style type="text/css">
 video::-internal-media-controls-download-button {
  display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
 }
video::-webkit-media-controls-panel {
  width: calc(100% + 30px);
}
 </style>

如果是PC电脑上，完全可以用video标签controlsList属性，修改成如下即可！

<video controls controlsList="nodownload"></video>

//去除右键事件

$("video").live("contextmenu",function(){//取消右键事件
    return false;});

4.H5兼容性，参考代码:

<video
  id="videowrap" 
  src="video/test.mp4" 
  poster="images/1.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape横屏，portraint竖屏，默认值为竖屏*/
  style="object-fit:fill">
</video

5.video在播放m3u8拖动进度条BUG 拖动回弹

video在播放m3u8拖动进度条，进入缓冲时会卡很久，比如当前播放1:20秒，拖动进度条到1:30秒，会进行缓冲，要缓冲很久，且缓冲好之后，会跳到1:35秒-1:45秒左右继续播放，并不会在实际拖动进度条的位置播放。
此问题在小程序上不会出现，只在app端有 部分ios手机有这现象

问题已确认。

因为该m3u8是加密的hls流。每个切片大小为10s

1 卡顿问题，比如 当跳转至下一分钟时，需要连续下载6个切片且解密成功后，才能继续播放，所以会有卡顿现象。
2 seek不准确的问题， 因为切片的最小单位是10s,每次跳转后需要重新下载并且从下一个10s开始播放。

uni-app的video组件基于 ffmpeg。
上述两个问题在 ffplay 和 vlc播放器上同样存在。

微信小程序不存在此问题，从现象上看，因为他从第一秒播放的时候就预加载了尽可能多的切片到本地，后续的播放都是本地操作。
稍后video组件会支持类似的功能。

6.video 点击全屏 如何横屏播放

h5 video 横屏播放

https://www.jianshu.com/p/23f9dbfab563

7.video 视频图像 变形 拉伸 压缩

video{

  height:auto;
  width:100%
}

方法一 css 写法 video视频自适应缩放显示 根据宽高比16:9

https://blog.csdn.net/weixin_45266779/article/details/120990591

方法二 通过 js 计算的方法 设置 object-fit 属性

https://www.cnblogs.com/congxueda/p/15091316.html

方法三 调整rotateX即可实现高度变小，也就是宽高比变大了

https://www.cnblogs.com/liuxianan/p/html5-video-resize.html

方法四

8.video ios 打开页面 禁止 全屏 播放

video 标签中添加playsinline属性 webkit-playsinline='true' playsinline='true'

<video controls="controls" 
webkit-playsinline='true'
 playsinline='true' 
preload="auto">  
</video>

native层

Obj-C中，需要添加配置webview.allowsInlineMediaPlayback = YES;
Swift请查找相关API进行配置。

开发5+App，需要在manifest.json的plus节点下新增allowsInlineMediaPlayback节点为true。

"plus":{  
    "allowsInlineMediaPlayback": true  
}

9.video ios 禁止 画中画 不显示 画中画按钮 disablePictureInPicture

            <video id="video"
                   width="320" height="240"  webkit-playsinline  playsinline="true" 
                    x5-video-player-type="h5" x5-video-player-fullscreen="false" 
                    src="@/assets/images/content-service/1637212363598590.mp4" 
                    x5-video-orientation="landscape" controls="controls" 
                    controlslist="nodownload" 
                    disablePictureInPicture
                    :poster="joinCmsServer(articleDetail.thumbnail)" >
                    your browser does not support the video tag
                  </video>

10. 监听 全屏 和 非全屏事件

document.addEventListener('webkitfullscreenchange', function() {  
        var el = document.webkitFullscreenElement; //获取全屏元素  
        console.log('--webkitfullscreenchange--' + el)
        if(el) {  
             console.log('--全屏--')
        } else {  
            console.log('--非全屏--')
        }  
      });  

<script>
    //jQuery监听事件(窗口状态改变)
    $(window).resize(function () {
        if (checkIsFullScreen()) {
            console.log("进入全屏");
        } else {
            console.log("退出全屏");
        }
    });
    //js监听事件(全屏状态改变)
    /*document.addEventListener('fullscreenchange', () => {
        if (checkIsFullScreen()) {
            console.log("进入全屏");
        } else {
            console.log("退出全屏");
        }
    });*/
    //上面2个监听事件可根据项目需求2选1,然后调用此检测全屏方法
    function checkIsFullScreen(){
        var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
        return isFullScreen == undefined ? false : isFullScreen;
    }
</script>    

安卓监听进入全屏的事件：

jsvideo.addEventListener("x5videoenterfullscreen", () => {
  console.log("进入全屏通知");
})
jsvideo.addEventListener("x5videoexitfullscreen", () => {
  console.log("退出全屏通知");
})

IOS监听进入全屏的事件：

jsvideo.addEventListener("webkitbeginfullscreen", () => {
  console.log("进入全屏通知");
})

jsvideo.addEventListener("webkitendfullscreen", () => {
  console.log("退出全屏通知");
})