video標簽播放視頻只有聲音沒有畫面&在iOS9中video標簽播放無效

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上播放頁頁正常了。