HTML5是最新的HTML版本,它引入了許多新的標(biāo)簽和屬性,其中就包括了音視頻播放相關(guān)的標(biāo)簽和API。在HTML5中,可以使用video標(biāo)簽來(lái)嵌入視頻,使用audio標(biāo)簽來(lái)嵌入音頻。當(dāng)然,為了控制音視頻的播放,我們還需要添加一些控制按鈕。下面,我們將分享一段HTML5播放暫停按鈕的代碼。
首先,在網(wǎng)頁(yè)的body標(biāo)簽中,我們需要使用video標(biāo)簽來(lái)嵌入視頻:
其中,id屬性指定了這個(gè)video標(biāo)簽的唯一標(biāo)識(shí)符,src屬性指定了視頻文件的路徑,controls屬性表示播放器的控制條。
接著,在網(wǎng)頁(yè)的script標(biāo)簽中,我們可以使用JavaScript代碼來(lái)給播放按鈕綁定事件:
上面的代碼中,我們首先獲取了video標(biāo)簽和play按鈕的DOM元素,然后為play按鈕綁定了一個(gè)onclick事件。當(dāng)用戶點(diǎn)擊按鈕時(shí),如果視頻是暫停狀態(tài),我們就調(diào)用video的play()方法開(kāi)始播放視頻,并把按鈕的文字改為"暫停";如果視頻是播放狀態(tài),我們就調(diào)用video的pause()方法暫停視頻,并把按鈕的文字改為"播放"。
最后,我們把按鈕的HTML代碼放在一個(gè)p標(biāo)簽中:
這樣,我們就完成了一個(gè)簡(jiǎn)單的HTML5播放暫停按鈕的實(shí)現(xiàn)。當(dāng)然,這只是一個(gè)入門級(jí)的示例,如果想要實(shí)現(xiàn)更復(fù)雜的功能,比如快進(jìn)、快退、全屏等,我們需要結(jié)合HTML5提供的其他API和JavaScript代碼來(lái)完成。