最近在研究小程序的時候發(fā)現(xiàn)網(wǎng)站文章中用iframe插入的無法在小程序中顯示，起初我以為是小程序的問題，便在小程序開發(fā)者的群里問了一下，結(jié)果大佬出來解釋說，iframe框架引入的視頻小程序無法顯示，建議用video標(biāo)簽。

所以又試了下用video標(biāo)簽插入視頻，測試沒問題，果然小程序能正常顯示。下面就將我自己在網(wǎng)站文章中使用video標(biāo)簽添加B站視頻且在小程序中同步添加視頻的過程中遇到的幾個問題總結(jié)下來，以便后期自己再遇到同樣的問題而手足無措（原諒我是個小白菜），也希望能幫一些同樣是小白菜的站長避坑。

1、video標(biāo)簽的詳細(xì)用法

自定義寬高

?video?src="movie01.mp4"?controls?style="width:400px;height:300px;"??/video?

通過設(shè)置屬性來讓視頻是否開啟自動播放，使用autoplay屬性可以讓瀏覽器加載完后視頻文件后立即播放

?video?width="400"?height="300"?controls?autoplay>
??<source?src="movie01.mp4"?type="video/mp4">
??您的瀏覽器不支持?video?標(biāo)簽。
?/video>

在自動播放時設(shè)置muted狀態(tài)，這樣做的目的是當(dāng)視頻自動播放時會靜音，而且我們還可以通過點(diǎn)擊播放器的揚(yáng)聲器來開啟聲音

?video?width="400"?height="300"?controls?autoplay?muted>
??<source?src="movie01.mp4"?type="video/mp4">
??您的瀏覽器不支持?video?標(biāo)簽。
?/video>

使用loop屬性讓視頻播放結(jié)束時，再從頭開始循環(huán)播放

?video?width="400"?height="300"?controls?loop>
??<source?src="movie01.mp4"?type="video/mp4">
??您的瀏覽器不支持?video?標(biāo)簽。
?/video>

設(shè)置preload屬性中的不同屬性值，來告訴瀏覽器應(yīng)該怎樣加載一個媒體文件：
auto：表示讓瀏覽器自動下載整個文件
none：表示讓瀏覽器不必預(yù)先下載文件
metadata：表示讓瀏覽器先獲取視頻文件開頭的數(shù)據(jù)塊，從而足以確定一些基本信息（比如視頻的總時長，第一幀圖像等）

?video?width="400"?height="300"?controls?preload="auto">
??<source?src="movie01.mp4"?type="video/mp4">
??您的瀏覽器不支持?video?標(biāo)簽。
?/video>

通過poster屬性可以設(shè)置視頻的封面圖片，瀏覽器在下面三種情況下會使用這個圖片：
（1）視頻第一幀未加載完畢
（2）把preload屬性設(shè)置為none
（3）沒有找到指定的視頻文件

?video?width="400"?height="300"?controls?preload="none"?poster="images/5.jpg">
??<source?src="movie01.mp4"?type="video/mp4">
??您的瀏覽器不支持?video?標(biāo)簽。
?/video>

2、我們發(fā)現(xiàn)用video標(biāo)簽插入視頻的時候，視頻文件是MP4格式，而B站視頻我們一般復(fù)制到的視頻鏈接，是一個鏈接形式。那么怎么在B站獲取MP4格式的視頻文件呢？

首先在B站打開需要的視頻，然后右鍵“檢查”進(jìn)入開發(fā)者工具（谷歌瀏覽器），然后在上邊選擇“NetWork”>>>然后選“Media”，此時按“Ctrl+R”后就會在右側(cè)顯示此視頻的MP4文件地址。

格式類似于：

https://upos-sz-mirrorhw.bilivideo.com/upgcxcode/93/07/544980793/544980793-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1646998200&gen=playurlv2&os=hwbv&oi=0&trid=b4039973ab0d47479e1e3fe9ebd7ce70h&platform=html5&upsig=3d65c8e73e1d5ff56f7ca9128767aa65&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=0&bvc=vod&nettype=0&bw=49774&logo=80000000

雖然看起來不像MP4格式的文件，但是把這個地址復(fù)制到video標(biāo)簽中確實(shí)會顯示視頻。

3、關(guān)于視頻的寬和高，為了很好的適應(yīng)PC端、手機(jī)端和小程序端，建議在video標(biāo)簽中將視頻的寬度設(shè)為100%，高度不設(shè)。