視頻標(biāo)簽video在ie9下不顯示封面等問題解決

ideo標(biāo)簽是屬于html5標(biāo)簽，所以兼容性理論上是在ie9+以及chrome、火狐等瀏覽器，但是實(shí)際情況卻不容樂觀，以下是切圖網(wǎng)在響應(yīng)式的前端項(xiàng)目開發(fā)中遇到的問題，以及解決方案。

HTML5 Video Poster 封面圖片不支持 IE9

為了使您的HTML5視頻的海報圖像顯示在IE9中，您應(yīng)該將preload =“none”添加到<video>標(biāo)記。如果視頻加載，IE9似乎會覆蓋html5海報圖像。通過添加屬性不允許它預(yù)加載，海報圖像在IE 9瀏覽器中正常工作。

我們的開發(fā)團(tuán)隊在HTML5視頻播放器的初始版本中發(fā)現(xiàn)了這個問題。

video標(biāo)簽width=“100%” height=“100%” 在ie9下無效

通過css或者style方式設(shè)置 width：100%，height：100% 可以解決，或者固定寬高。

結(jié)尾

要想解決ie瀏覽器下的視頻播放問題，也可以采用主流的插件videojs解決。

----

來源：切圖網(wǎng)（qietu.com）

何選定vue視頻照片封面，不少于300字在Vue中選定視頻照片封面的過程可以分為兩個步驟：選擇視頻和截取照片。

第一步是選擇視頻。可以使用Vue的文件上傳組件或者第三方插件來實(shí)現(xiàn)視頻的選擇功能。在用戶選擇視頻后，可以通過監(jiān)聽文件上傳的change事件來獲取用戶選擇的視頻文件。

第二步是截取照片。在Vue中，可以使用HTML5的video元素來播放視頻，并且可以通過video元素的currentTime屬性來控制視頻的播放進(jìn)度。在選擇視頻后，可以將視頻文件賦值給video元素的src屬性，并將video元素的autoplay屬性設(shè)置為true，使視頻自動播放。

然后，可以通過監(jiān)聽video元素的loadedmetadata事件來獲取視頻的元數(shù)據(jù)，包括視頻的時長和尺寸。根據(jù)需要，可以選擇合適的時間點(diǎn)來截取照片。可以通過video元素的currentTime屬性來控制視頻的播放進(jìn)度，然后使用canvas元素的drawImage方法來將視頻的當(dāng)前幀繪制到canvas上。

最后，可以使用canvas元素的toDataURL方法將canvas上的內(nèi)容轉(zhuǎn)換為base64格式的圖片數(shù)據(jù)，并將其作為封面圖保存到數(shù)據(jù)庫或者提交給后端進(jìn)行處理。

在Vue中，可以通過以下代碼實(shí)現(xiàn)視頻照片封面的選擇和截取：

1. 在模板中添加文件上傳組件和video元素：

```html

<div>

< img v-if="coverImage" :src="coverImage" alt="封面圖">

</div>

</template>

```

2. 在Vue實(shí)例中添加選擇視頻和截取照片的方法：

```javascript

export default {

data() {

return {

coverImage: null

}

methods: {

selectVideo(event) {

const file = event.target.files[0]

const video = this.$refs.video

video.src = URL.createObjectURL(file)

capturePhoto() {

const video = this.$refs.video

const canvas = this.$refs.canvas

const context = canvas.getContext('2d')

context.drawImage(video, 0, 0, canvas.width, canvas.height)

const data= canvas.toDataURL('image/png')

this.coverImage = data

}

</script>

```

通過以上代碼，用戶可以選擇視頻文件并播放視頻，然后點(diǎn)擊截取照片按鈕，將視頻的當(dāng)前幀截取為照片，并將照片顯示在頁面上。用戶可以根據(jù)需要重復(fù)選擇和截取照片的過程，直到滿意為止。

言：萬物之始，大道至簡，演化至繁。水滴不染塵世浮華，方能純凈如冰川靈動如絲絨。落紅不逐春日絢爛，方有一年春盡一年春。

一、html5的介紹

1.1介紹

html號稱超文本標(biāo)記語言，代表著瀏覽器技術(shù)發(fā)展的一個階段。html版本1到版本5的更新迭代都是由組織W3C管理的。當(dāng)時到html4.1的時候，W3C組織就聲稱不再更新版本了。而改用XHTML。但是由于瀏覽器的各種不兼容的問題，于是乎W3C這個組織就和其他的瀏覽器產(chǎn)商一起聯(lián)合起來將這門語言再次更新到html5

比喻：

html5 >機(jī)器人的骨骼

css3 >機(jī)器人的外在修飾

js > 機(jī)器人的行為如行走、抬腿

Jquery > 封裝好的控制行為的庫，可以提高效率

1.2優(yōu)勢

易用性
支持視頻和音頻
互動性高
支持移動設(shè)備
未來的趨勢

1.3開發(fā)工具

HBuild、WebStrom、sublime Text

二、代碼規(guī)范

2.1代碼規(guī)范

新建一個Web項(xiàng)目

相比html4來說，html5的語法更加簡潔并且在規(guī)定上也更加寬松。

單標(biāo)簽不用寫關(guān)閉符號
雙標(biāo)簽省略結(jié)束標(biāo)簽
html、head、body、colgroup、tbody可以完全省略
刪除其中一些，打開瀏覽器的檢查元素功能，也不會報錯

三、各類標(biāo)簽

3.1文本標(biāo)簽

b標(biāo)簽：表示關(guān)鍵字和產(chǎn)品名稱。<b>html</b>其實(shí)它的實(shí)際作用就是將一段文字加粗。但是并不是特別強(qiáng)調(diào)它的重要性。比如說：在一段文字當(dāng)中出現(xiàn)的某些關(guān)鍵字或者產(chǎn)品的名稱就可以用b標(biāo)簽
strong標(biāo)簽：表示比較重要的文字<strong>html</strong>它的作用也是加粗，只是它在強(qiáng)調(diào)一段比較重要的文本
br單標(biāo)簽：換行
wbr標(biāo)簽：安全換行you've no idea how worried <wbr> i was當(dāng)用戶對網(wǎng)頁進(jìn)行縮放的時候可能會有一些單詞被擠到下一行。如果不行某個單詞被分離的話，可以使用安全換行標(biāo)簽
i標(biāo)簽：傾斜。em標(biāo)簽語義一樣，但em表示強(qiáng)調(diào)<i>傾斜標(biāo)簽</i>它用于表示外文詞匯或科技術(shù)語
s標(biāo)簽：刪除線。del標(biāo)簽表示強(qiáng)調(diào)。<s>html</s>刪除線
u標(biāo)簽：給文字加下劃線。ins標(biāo)簽表示強(qiáng)調(diào)<u>html</u>下劃線
small標(biāo)簽：添加小號字體<small>放小一號</small>將文本放小一號。通常用于免責(zé)聲明和澄清聲明。
sub和sup標(biāo)簽：添加上標(biāo)和下標(biāo)X<sub>5</sub>和Y<sup>2</sup>（sub和sup長差不多，這個要如何去記憶呢？大家可以看到b的肚子在下面，所以呢它是下標(biāo)，而p的頭部在上方，所以記錄是上標(biāo)。那這樣一來是不是就感覺清晰了許多呢）
q標(biāo)簽：引用來自其它出處的內(nèi)容<q>有朋自遠(yuǎn)方來</q>
ruby標(biāo)簽：語言元素。常用于幫助讀者正確發(fā)音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用來幫助讀者掌握表意語言文字的正確發(fā)音。比如說漢語拼音在文字的上方。
bdo標(biāo)簽：設(shè)置文字方向<bdo dir="rtl">設(shè)置文字方向</bdo>dbo必須使用屬性dir才可以設(shè)置，一共兩個值：rtl從右到左和ltr從左到右。一般默認(rèn)是ltr。還有一個bdi元素也是處理方向的，由于是特殊語言的效果，并且主流瀏覽器有些不支持，所以可以忽略。
mark標(biāo)簽：突出顯示文本<mark>突出顯示文本</mark>加上一個黃色的背景，黑色的字。從語義上來看，與上下文相關(guān)而突出的文本，用于記號。
a標(biāo)簽：超鏈接a元素屬于文本元素，有一些私有屬性。
href屬性 <a >百度</a> 這個屬性是必須的，否則a元素就變得毫無意義。它的屬性值意味著點(diǎn)擊跳轉(zhuǎn)到指定的外部網(wǎng)站去。
target屬性<a target="_blank">百度</a> 這個屬性告訴瀏覽器希望打開的新窗口顯示在哪里。_blank表示在新窗口中打開文檔。_self表示在當(dāng)前窗口打開文檔。默認(rèn)_self。(_parent和_top這些要結(jié)合框架來使用，但是基本上用得已經(jīng)很少了。)
錨點(diǎn)設(shè)置：用于將同一個文檔中的另一個元素移入視野。說通俗一點(diǎn)就是通過點(diǎn)擊這個錨點(diǎn)定位到頁面中的某個位置。

</br>