有時候我們在做項目的過程中會遇到這樣的需求：

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

想要的效果，例下：

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

①因為是一個vue項目，先定義一個變量，暫且叫它videoIsPlay，默認為false，即視頻暫停時狀態(tài)；

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

②配置video標簽；

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

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

• 示例代碼如下（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();} },

---

總結

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

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