原文：https://blog.csdn.net/kinber_xd/article/details/81631517
最近在要做一個在H5頁面中嵌入第三方視頻的功能，用戶可以觀看點贊等操作。由於本人目前在此方面初次了解，所以寫下本文以供互相學習交流，有不對的地方，可留言對我進行指導（大神勿噴）。好了話不多說，關於H5頁面嵌入視頻幾種方法，我在網上查了資料並整理到如下兩類：
第一類：ifame嵌入 -- 支持嵌入第三方視頻以及本地視頻。
直接上代碼：
<!-- 使用iframe嵌入本地視頻 --> <div style="width: 500px;height: 380px;margin: 0px auto;"> <iframe width="500px" height="380px" src="mda-ic3eip66u80zeutr.mp4" frameborder=0 allowfullscreen></iframe> </div> <!-- 使用iframe嵌入第三方視頻(例如:優酷視頻、騰訊視頻、土豆視頻) --> <div style="width: 500px;height: 380px;margin: 0px auto;"> <iframe width="500px" height="380px" src="http://player.youku.com/embed/XMzcwNTY3NTM2MA" frameborder=0 allowfullscreen></iframe> </div>
效果如下圖：
1.1：第一種就是iframe嵌入本地視頻的demo，直接在iframe的src中填寫視頻在項目中的地址並加上allowfullscreen屬性即可。（關於allowfullscreen屬性的作用，在后面的內容中會解釋）
1.2：第二種就是我目前需求所需要的，可以在H5頁面中嵌入第三方視頻的方法。這里以優酷視頻為例，首先在iframe的src中填寫優酷視頻引用鏈接，格式如下：
http://player.youku.com/embed/XMzcwNTY3NTM2MA
綠色部分是優酷通用的引用鏈接（不用修改），紅色部分填寫你想嵌入視頻的ID。（下方有獲取優酷視頻ID的教程）
第二類：<video>標簽嵌入 -- (僅支持嵌入本地視頻)
代碼:
<!-- 使用video嵌入本地視頻 -->
<div style="width: 500px;height: 380px;margin: 250px auto;">
<video src="mda-ic3eip66u80zeutr.mp4" type="video/mp4" controls autoplay width="500px" height="380px" >
抱歉，你的瀏覽器不支持video標簽。。
</video>
</div>
效果:
2.1：video標簽嵌入本地視頻的話，直接在video的src中填寫視頻在項目中的地址即可，目前video標簽嵌入視頻的話不支持嵌入第三方視頻，我試過將iframe的src里的優酷視頻鏈接放到video的標簽中，運行的時候無法播放。
好了，以上就是H5嵌入視頻的幾種方法，各位可根據自己的需要選擇適合自己的方法，下面是關於獲取優酷視頻ID以及我對allowfullscreen屬性和video標簽屬性的理解，想深入了解的小伙伴可以繼續圍觀...
獲取優酷視頻ID教程
https://jingyan.baidu.com/article/0320e2c1246e1b1b87507b85.html，（百度經驗）。
如鏈接失效，我的方法是：打開優酷官網：搜索你想嵌入的視頻
點擊搜索后注意地址欄，紅框區域就是你想要的了
關於iframe的allowfullscreen屬性
關於該屬性網上的解釋是：允許全屏=true。也就是允許全屏，=false時表示不允許全屏。我加上該屬性之后iframe好像沒有什么變化。。。不知道是我用法不對還是我已經定義了寬度了，總之加不加好像對我影響不大，有對該屬性了解的童鞋，歡迎在下方留言評論。
關於video標簽的controls和autoplay屬性
controls屬性：個人理解表示顯示播放控件（如：播放按鈕，音量條等）
autoplay屬性：表示是否需要自動播放
The End