前端之旅

此篇要介紹的是<Video>這個標籤，

但並非所有的瀏覽器都支援，

因此在製作原始檔時，

需要製作多種格式的影片檔，

才不會發生無法播放的問題。

若影片檔名為.mp4，則類型為type="video/mp4"；

若影片檔名為.webm，則類型為type="video/webm"；

若影片檔名為.ogg，則類型為type="video/ogg"；

HTML：

放兩種格式的影片，

影片的格式須為MP4、WEBM、OGG....等。

加入controls="autoplay"〈為影片下面的黑色bar，可放大影片、調聲音、暫停/播放...等〉；

加入autoplay="autoplay"〈為影片主動播放〉；

以上兩種也可以一起加入，即會主動播放，也會有下面的bar。

<video width="320" height="240" controls="autoplay" preload="auto"  style="display: block;position: absolute;left: 50%;transform: translate(-50%, 15%);">
        <source src="http://s1.mi.com/zt/14072201/sh-v-4.mp4" type="video/mp4">
            <source src="http://s1.mi.com/zt/14072201/sh-v-4.webm" type="video/webm">
            </video>

完成如下：

示範使用，

影片來源：小米