有時(shí)候我們在做項(xiàng)目的過程中會遇到這樣的需求：

使用H5中的video標(biāo)簽播放一個(gè)視頻，并在視頻的中心位置放置一個(gè)暫停的圖標(biāo)，點(diǎn)擊后視頻播放，圖標(biāo)消失；再次點(diǎn)擊后，視頻暫停，圖標(biāo)出現(xiàn)。

想要的效果，例下：

• 我們可以配合使用video標(biāo)簽的pause、play、ended方法進(jìn)行實(shí)現(xiàn)：

①因?yàn)槭且粋€(gè)vue項(xiàng)目，先定義一個(gè)變量，暫且叫它videoIsPlay，默認(rèn)為false，即視頻暫停時(shí)狀態(tài)；

data () {return {videoIsPlay: false,} },

②配置video標(biāo)簽；

<videoref="videoRef" // 用來獲取video所在的DOM元素:src="視頻地址"controls // 規(guī)定瀏覽器應(yīng)該為視頻提供播放控件,比如：暫停、播放、聲音、字幕等@play="videoIsPlay = true;" // play() 方法開始播放當(dāng)前視頻，改變videoIsPlay的值，使圖標(biāo)隱藏@pause="videoIsPlay = false;" // pause() 方法暫停播放當(dāng)前視頻，改變videoIsPlay的值，使圖標(biāo)顯示@ended="videoIsPlay = false;"> // 視頻播放完畢，改變videoIsPlay的值，使圖標(biāo)顯示 </video>

③ 生成視頻中心位置的暫停圖標(biāo)，可以找UI切圖，或自己用CSS寫一個(gè)樣式出來，此處選擇第二種方式，同時(shí)給該圖標(biāo)一個(gè)點(diǎn)擊事件；

• 示例代碼如下（HTML）：

<i class="start-play" v-show="!videoIsPlay" @click="changeVideoStatus()" > </i>

• 示例代碼如下（CSS）：

.start-play {cursor: pointer;width: 63px;height: 63px;background: linear-gradient(135deg, #1890FF 0%, #0059F4 100%);opacity: 0.7;border-radius: 50%;display: block;position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;&::after {content: "";width: 0;height: 0;border: 13px solid transparent;border-left: 19px solid white;position: absolute;top: 32%;left: 40%;} }

• 示例代碼如下（JS）：

changeVideoStatus() {const video = this.$refs.videoRef;if(video.paused) {video.play();} else {video.pause();} },

---

總結(jié)

以上是生活随笔為你收集整理的使用H5中的video标签时，页面中间显示“暂停”图标；点击播放，图标消失；点击暂停，图标出现（play、pause、ended）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。