video标签播放视频只有声音没有画面&在iOS9中video标签播放无效

Posted 2020-10-04 MachLau

video标签定义视频，比如电影片段或者其他视频流。目前video标签只支持MP4，WebMail，Ogg格式的视频。

兼容性：IE8以及更早的版本不支持video标签。其他现代浏览器均支持。

各浏览器对于各个视频格式的支持如下：

• MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
• WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
• Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

标签的属性和各个值代表的意思

<video id="my-video" class="movie-video" width="320" height="240" controls preload="auto" poster="img/adpic/video.png(设计所说的视频封面)">

　　<source src="movie.mp4" type="video/mp4">

　　<source src="movie.ogg" type="video/ogg">

　　您的浏览器不支持 video 标签。

</video>

$(document).on(\'tap\',\'.movie-video\',vidplay);

function vidplay() {
　　var video = document.getElementById("my-video");
　　if (video.paused) {
　　　　video.play();
　　} else {
　　　　video.pause();
　　　　$(\'.movie-video\').attr("contols","controls");
　　}
　　}

##在这次做需求的时候遇见了视频播放只有声音没有画面的情况。最后定位到是视频格式的问题，没有把导出的时候没有把编码选为h264。

**视频文件一般较大。而网络的带宽有限，所以需要视频文件不影响画质的情况下尽可能的小。有一个小窍门，能够不影响画质的情况下把视频文件变小。我是先把源文件转为avi， 这样大小会自动压缩，也就是从800m到了200m接着再转回mp4在这个时候选编码为h264    最后出来就只有100多M。这样就得到了想要的格式的小的视频啦~

##做的页面在h5的浏览器中运行的好好的。唯独在ios9中播放异常。原来是iOS9对于网络协议http要求较为严格。之前的iOS8和之后的iOS10 都对这一要求放开了。所以，只需要更改网络协议为https。在iOS9上播放页页正常了。