谈谈在H5页面中嵌入自媒体视频后不能播放的问题

今天一个朋友问到我一个关于在H5页面中视频不能播放的问题，但是这个视频保存到本地用播放器是可以播放的，只是嵌套在页面里不行而已，点击播放按钮没有任何反应。如下图所示：

寻找问题根源

以我之前的分析问题的经验，首先我们需要从几个点出发：

1、检测这个视频本身有没有问题，可以保存下来，在本地播放下，是否可以正常，如果正常就可以排除。

2、检查你的HTML5的代码写的是否有问题呢？

<video width="100%" height="100%" preload="none" controls="controls" draggable="true">
    <source src="h5.mp4" type='video/mp4'>
</video>

页面中插入自媒体视频的代码其实很简单，如上所示。

3、如果以上两点都没有问题的话，我们就要视频本身的编码问题出发了。

 视频编码问题，格式都是MP4，但是HTML中只支持H.264编码格式

 可以使用任意视频转换工具，将视频文件转换为符合格式的media。

知识拓展

进一步学习，使用Google Chrome，开启调试模式或者说debug模式，会发现播放视频使用的是HTML5的<video>标签。

这个<video>标签的作用就是让多媒体文件可以很方便的在网页中播放，而不用下载到本地。

目前，<video>biao标签元素支持三种视频格式：MP4、WebM、Ogg。

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

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

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

提示和注释

提示：可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

解决问题工具

刚才上面已经分析了是视频本身编码问题的话，我们就要对视频进行转码，可以用到工具，比如：H.264 Encoder，另外也可以用在线工具，比如：https://www.convertfiles.com/convert/video/MP4-to-264.html，还有：https://www.ofoct.com/zh/video-converter/convert-to-h-264-video.html#google_vignette

大家自己选择，转码后，视频应该可以播放正常了。

另外也想多说几句，大家有兴趣的话，也可以去研究下ffmpeg的处理这个问题，虽然也是一种方案，但是要求很高的，具体怎么操作，大家去搜索官方文档和API，自行研究吧，小编在这里就不一一分析了。