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

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

重点：比如MP4格式，MP4只是一个容器，里面还有一个叫编码器的东西。格式虽然都是MP4但是html中只支持H.264的编码格式。所以要用软件来转码。

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

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

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

//去除右键事件

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

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

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

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

Obj-C中，需要添加配置webview.allowsInlineMediaPlayback = YES

Swift请查找相关API进行配置。

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

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

IOS监听进入全屏的事件：

通过html5中的video标签添加视频文件。

1、新建html文件，如图所示，在body标签中添加video标签，为video标签设置“src”属性，属性值是视频文件地址，这里以html同一目录下的“movie.mp4”视频为例：

2、此时的视频只会显示一个封面，并没有控制按钮，这时为video标签添加“controls”属性，如图所示，不需要添加属性值，可以看到视频中出现了常用的控制按钮：

3、直接插入的视频显示宽和高是视频本身默认的宽和高，这时可以给video添加我们想要的宽和高，这里以宽度400和高度300为例，添加属性“width”，属性值为“400”，添加属性“height”，属性值为“300”：

4、这时视频默认是加载完成后等待用户点击播放按钮再播放，如果需要加载完成后自动播放，可以给video添加属性“autoplay”，属性值为“autoplay”，这时视频加载完成后就会自动播放：

HTML5是前端技术，并不影响网站的后台功能，亲放心，做H5响应式网站，也可以在后台上传视频并在前端播放的。亲可以百度搜下我们做的【家来福】这个网站，就是H5响应式，并且有视频播放功能。

---