【Web】HTML tag：iframe 與 video 在網頁內嵌影片的異同

tags: HTML

iframe

1. 瀏覽器：都可支援

   

2. 相容性佳

3. 加載包含播放影片代碼的url，iframe不負責播放影片

4. 在iframe的程式碼中，有另外負責播放影片的代碼

5. 屬性：

   • width、height寬高：width="640"
   • src 影片位址：src="https://www.youtube.com/embed/影片id"
   • data-thumbnail-src 影片縮圖位址
   • frameborder 邊框：frameborder="0"
   • allowfullscreen 是否全螢幕：allowfullscreen 寫這樣即可

6. 範例：

<iframe src="https://openload.co/embed/rSArHXbt8Ss/" scrolling="no" frameborder="0" width="100%" height="430" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

video

1. 瀏覽器：舊版瀏覽器不支援

   

2. 相容性差，不能保證使用者一定是使用HTML5進行瀏覽

3. 直接針對影片進行播放

4. 影片type

   • mp4
   • ogg
   • webm

5. 通常影片src存放於自己的網站下，或者自己本地端的資料夾中

6. src結尾必須是副檔名(e.g. mp4)

7. 屬性

   • width、height：寬高
   • src：影片位址
     • movie.mp4,
       ./movie.mp4：檔案位於當前資料夾
     • ../movie.mp4：檔案位於上一層資料夾，可依此類推 ../../movie.mp4
     • /movie.mp4：檔案位於根目錄，例如：C:\movie.mp4
   • autoplay：自動播放
   • controls：控制面板 (播放、暫停)
   • loop：循環播放
   • muted：靜音

8. 範例：

<video width="320" height="240" controls>  
    <source src="./video/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.  
</video>

9. 實際範例：

   • 拉到該網址最下方的 “效果展示”

   • 網址：https://twweeb.org/html5-video-tag/

Conclusion 結論

1. 個人還是習慣使用 iframe tag
2. video tag 使用上十分不方便，缺點太多
   • 瀏覽器舊版不支援，相容性差，只有HTML5才能用
   • 影片的url結尾一定要是副檔名，很多大的影音網站根本沒有這功能
   • 影片的存放位置是個問題

Reference 參考資料

1. Video HTML5 element vs iframe：
   https://teamtreehouse.com/community/video-html5-element-vs-iframe
2. What are the differences between using an html5 embedded video vs. an iframe with a youtube link?
   https://stackoverflow.com/questions/37359348/what-are-the-differences-between-using-an-html5-embedded-video-vs-an-iframe-wit
3. iframe：https://www.w3schools.com/tags/tag_iframe.asp
4. video：https://www.w3schools.com/tags/tag_video.asp
5. 使用相對路徑執行程式：https://gist.github.com/kiohtc/1266787