《HTML5+CSS3網(wǎng)頁制作》課件-模塊八 網(wǎng)頁多媒體

模塊八網(wǎng)頁多媒體任務1視頻與音頻網(wǎng)頁制作CSSHTML知識準備——視頻與音頻實戰(zhàn)演練——制作“音樂播放器”網(wǎng)頁視頻與音頻0201進階訓練——制作“視頻播放”網(wǎng)頁03動手實踐——制作“自制視頻播放器”網(wǎng)頁04

1.了解視頻與音頻的編碼與解碼

2.了解視頻與音頻的文件類型

3.掌握audio元素的語法、常用屬性，能夠在網(wǎng)頁中添加音頻文件

4.掌握video元素的語法、常用屬性，能夠在網(wǎng)頁中添加音頻文件

5.了解使用DOM控制audio和video對象視頻與音頻學習目標：

1.培養(yǎng)負責任的數(shù)字公民，使其在多媒體內容創(chuàng)作和分享中尊重版權、保護隱和選擇適宜性內容。

2.培養(yǎng)創(chuàng)新意識和勇于探索精神，使其將個人專業(yè)成長與國家科技發(fā)展戰(zhàn)略緊密結合，為國家科技進步貢獻力量。

3.引導成為終身學習者，使其保持好奇心，主動學習新技術和工具，培養(yǎng)適應未來職場變化的能力。視頻與音頻思政目標：

1知識準備--課程引入

2想象一下我們需要多少數(shù)據(jù)來存儲未經(jīng)壓縮的視頻：全色彩的高清視頻（1920x1080）每一幀為8,294,400字節(jié)。按照典型的每秒30幀的傳播速度，高清視頻每秒鐘會占用248,832,000字節(jié)（約249MB）。一個相當?shù)湫偷?0分鐘視頻會議將需要約447.9GB的存儲空間，而2小時的電影則需要將近1.79

TB（也就是1790GB）

的存儲空間。“運輸一個裝滿水和魚的魚缸，運輸時可以僅保留最少的水，‘放水’即為編碼壓縮，‘重新添水’為解碼重建。1知識準備--編碼與解碼1知識準備--編碼與解碼

編解碼器編解碼器全稱所支持的容器格式AACAdvancedAudioCodingMP4,

ADTS,

3GPFLACFreeLosslessAudioCodecMP4,

Ogg,

FLACMP3MPEG-1AudioLayerIIIMP4,

ADTS,

MPEG,

3GPOpusOpusWebM,

MP4,

OggVorbisVorbisWebM,

Ogg1知識準備--編碼與解碼

3AAC是高級音頻編碼(AdvancedAudioCoding)的縮寫，AAC可以在比MP3文件縮小30%的前提下提供更好的音質。FLAC

(

FreeLosslessAudioCodec

)是一種無損音頻編解碼器，由X基金會.

它提供了良好的壓縮率，而不會損失音頻保真度；由于壓縮算法是專門為音頻設計的，因此與使用通用壓縮算法相比，它可以提供更好的結果。FLAC是需要原始質量和音調準確性的較小音頻效果文件以及音樂存檔的絕佳選擇。MP3是“MPEG-1音頻層3”的簡稱，由國際標準化組織(ISO)和國際電信聯(lián)盟(ITU-T)共同提出，可以將音頻以1：10甚至1：12的壓縮率進行壓縮，能夠在音質丟失很小的情況下把文件壓縮到更小的程度。而且還非常好的保持了原來的音質。正是因為MP3體積小，音質高的特點使得MP3格式幾乎成為網(wǎng)上音樂的代名詞。Opus是一種完全開放的音頻格式；可以有效地處理低復雜度的音頻，支持多種壓縮算法，甚至可以在同一個音頻文件中使用多個算法。它是一款出色的全方位音頻編解碼器，可用于您的Web應用程序，可用于您想到的任何音頻任務。Vorbis是一種新的音頻壓縮格式，由Xiph基金會提出，類似于MP3等技術，其最大優(yōu)勢是支持多聲道。1知識準備--編碼與解碼

41知識準備--編碼與解碼

4H.264/AVC是由國際標準化組織(ISO)和國際電信聯(lián)盟(ITU-T)共同提出，是以H.26x系列命名的視頻編碼標準之一，它是繼MPEG4之后的新一代視頻壓縮技術。H.265/HEVC是新一代視頻編解碼國際標準，由ISO與ITU共同制定，它主要是為在保證視頻質量的情況下提高壓縮率、降低網(wǎng)絡帶寬，它支持更大的視頻尺寸，更精細的編碼控制，用于對視頻要求更高的場合。VP8是第八代的On2視頻技術，由Google提出，能以更小的數(shù)據(jù)容量，提供更高質量的視頻，而且只需較小的處理能力即可播放視頻。VP9是Google開發(fā)的舊版VP8標準的繼承者。與VP8一樣，VP9是完全開放且免版稅的。其編解碼性能與AVC相當或略快，但質量更好。VP9的編碼視頻質量可與類似比特率的HEVC相媲美。AV1是開放媒體聯(lián)盟（AllianceforOpenMedia）推出的專門用于網(wǎng)絡視頻。它實現(xiàn)了比VP9和H.265/HEVC更高的數(shù)據(jù)壓縮率，比AVC高出50%之多。AV1是完全免版稅的，專為<video>元素和WebRTC使用而設計。1知識準備--編碼與解碼

4德國服勞恩霍夫通訊技術研究所(FraunhoferHHI)2020年7月6日正式宣布了下一代視頻編解碼標準H.266/VVC（VersatileVideoCoding）制定完成。相比前代標準（H.265/HEVC），H.266進一步提高了壓縮性能，可支持在視頻清晰度不變的同時為用戶減少50%的數(shù)據(jù)大小。例如，90分鐘的超高清視頻（H.265/HEVC）大約需要10GB的數(shù)據(jù)，而H.266僅需要5GB就可以做到這一點。H.266/VVC是專為4K和8K流媒體而構建的一代新標準，其將幫助用戶在設備上存儲更多的高清視頻，并減少網(wǎng)絡上的數(shù)據(jù)使用量。1知識準備--編碼與解碼

4圖:已經(jīng)得到批準并被納入VVC標準的各公司貢獻份額(IPlytics，2021年2月)2021年3月，著名知識產(chǎn)權媒體IAM發(fā)表的《誰在領跑VVC技術競賽》報道指出，在新一代視頻編解碼標準H.266/VVC的專利權劃分中，技術貢獻將成為衡量各公司所占份額和影響力的一個尺度，高通、華為和字節(jié)跳動在VVC標準定稿過程中獲得批準的技術提案數(shù)量排名前三位。1知識準備--編碼與解碼

5AVS-1與H.264/AVC性能相當AVS-2與HEVC（H.265）性能相當2019年1月28日，AVS-3第一版本已經(jīng)制定完成1知識準備--編碼與解碼

5該項目突破了傳統(tǒng)視頻編碼和計算框架，形成了完全自主的編解碼技術體系，主導制定了我國超高清視頻編碼標準GB/T33475.2-2016等AVS系列標準，被全球超高清聯(lián)盟采納為國際通用格式，在VVC/H.266等國際標準制定中掌握了重要話語權，研制了自主的超高清實時編碼器和解碼芯片，形成了“技術標準-芯片終端-系統(tǒng)應用”的完整產(chǎn)業(yè)鏈。1知識準備--編碼與解碼

1MediaInfo/

MediaInfo是一款非常實用的視頻參數(shù)檢測工具，除了可以對視頻進行編碼分析查詢，還可以對音頻文件的編碼及信息進行檢測，該款工具軟件是一款免費軟件。1知識準備--文件類型

1知識準備--文件類型

21知識準備--文件類型

3

包含視頻軌道，音頻軌道和文本軌道，其中視頻軌道包含一個主視頻軌道和一個可選的Angle軌道；音頻軌道包含英語和西班牙語的音頻軌道，還有一個英語評論的音頻軌道；文字軌道包含英語和西班牙語的字幕軌道。1知識準備--文件類型

31知識準備--文件類型

3WebM由Google提出，旨在提供免版稅、高質量的開放式視頻壓縮格式，用于HTML5視頻。它支持VP8、VP9和AV1視頻編解碼器和Vorbis、Opus音頻編解碼器。MPEG-4（MP4）是MPEG文件格式的最新版本。本規(guī)范第1部分和第14部分中定義了兩種格式。MP4是當今流行的容器，因為它支持幾種最常用的編解碼器，并且得到廣泛支持。Ogg是一種開源免費的多媒體容器格式。Ogg容器格式可以用于封裝音頻、視頻、字幕、以及多媒體元信息。它既適用于流媒體傳輸，又能作為文件格式存儲多媒體。在標準制定的早期，Ogg專門用來封裝Vorbis編碼格式的語音，不過隨著技術的發(fā)展，Ogg被單獨提出來作為一種可以封裝任意媒體類型的容器格式。MPEG文件格式是流行的有損音頻壓縮格式，最常見的用途可能是包含Layer_III/MP3聲音數(shù)據(jù)；由此產(chǎn)生的文件是世界各地數(shù)字音樂設備使用的廣受歡迎的MP3文件。FLAC流行的無損音頻壓縮格式，該格式不受任何專利的限制，因此其使用不會受到干擾。FLAC文件只能包含F(xiàn)LAC音頻數(shù)據(jù)。1知識準備--文件類型

41知識準備--文件類型

4

但是，這些MIME類型中的每一種都是模糊的。所有這些文件類型都支持各種編解碼器，這些編解碼器可能具有任意數(shù)量的配置文件、級別和其他配置因素。因此，您可以將codecs參數(shù)添加到媒體類型。

為此，請附加一個分號(

;)

codecs=，然后附加描述文件內容格式的字符串。某些媒體類型只允許您指定要使用的編解碼器的名稱，而其他媒體類型也允許您指定對這些編解碼器的各種約束。您可以通過用逗號分隔來指定多個編解碼器。video/webm;codecs="vp8,vorbis"video/webm;codecs="vp9,opus"1知識準備--文件類型

1知識準備--文件類型Src屬性：1audio元素用于播放音頻，它的基本語法結構如下：<audio

src=“音頻的URL"controls="controls">

</audio>絕對URL：提供要顯示音頻的URL相對URL：1知識準備--audio元素1controls屬性：1audio元素用于播放音頻，它的基本語法結構如下：<audio

src=“音頻的URL"controls="controls">

</audio>設置是否使用播放控件。HTML5audio元素的屬性可以省略屬性值的有：controls、loop、autoplay、muted，如果完全省略這個屬性，則表示該屬性的屬性值為false。<audio

src=“音頻的URL"controls>

</audio>知識準備--audio元素12

谷歌瀏覽器在用戶體驗和安全性方面做出自己的限制，默認阻止音視頻的自動播放。autoplay屬性:該屬性表示音頻會盡快自動播放，不會等待整個音頻文件下載完成。如果不設置該屬性，音頻不會自動播放。知識準備--audio元素12loop屬性：用來設置音頻播放結束時重新開始播放。它可能具有以下值之一：?none

-表示不預加載音頻?metadata-表示只預加載音頻元數(shù)據(jù)

?auto-表示預加載整個音頻文件prelode屬性：用來告訴瀏覽器要預加載的數(shù)據(jù)。muted屬性：用來設置音頻播放時為靜音狀態(tài)。知識準備--audio元素12案例：為網(wǎng)頁添加背景音樂

為網(wǎng)頁添加背景音樂“beiduofen.mp3”,設置為無限循環(huán)。分析：背景音樂不需要顯示播放控件，不需要添加controls屬性，不顯示播放控件就需要添加autoplay屬性讓背景音樂自動播放，自動播放的音樂不需要預加載，那么就不需要添加prelode屬性，在播放時不需要靜音，也就不需要添加muted屬性，無限循環(huán)播放我們需要添加loop屬性。背景音樂會循環(huán)播放，我們每刷新一次網(wǎng)頁，音樂會重新播放<audio

src="audio/beiduofen.mp3"

autoplay

loop></audio>知識準備--audio元素13

雖然百分之98.26的瀏覽器都支持audio元素，但是用戶所使用的瀏覽器卻千差萬別，肯定會出現(xiàn)不支持的情況，可以在audio元素的開始標簽和結束標簽間添加提示信息，用以提醒用戶不能播放的原因，或用來檢查當前瀏覽器對音頻的支持情況。知識準備--audio元素13<audio

src="audio/beiduofen.mp3"

autoplay

controls>

對不起，您的瀏覽器不支持audio元素，<br>

您可以通過下載的方式來播放！<br>

<a

href=”audio/beiduofen.mp3”>MP3格式的《月光奏鳴曲》下載連接</a>

</audio>案例：檢查瀏覽器支持情況在不同瀏覽器中播放一段mp3格式的《月光奏鳴曲》，以便檢查瀏覽器對audio元素的支持情況。瀏覽器支持audio元素時運行效果圖瀏覽器不支持audio元素時運行效果圖知識準備--audio元素1

4Source元素及常用屬性Src屬性：提供要顯示音頻的URLType屬性：播放音頻的MIME類型，主要類型有:audio/ogg、audio/mp3audio/mpeg、audio/wav等。該屬性最好不要省略，否則瀏覽器在從上向下選擇音頻時會因為無法判斷自己能不能播放音頻而先行下載一小段音樂，從而浪費帶寬和時間。

<audio

autoplay

controls>

<source

src="audio/horse.ogg"

type="audio/ogg">

<source

src="audio/horse.mp3"

type="audio/mp3">

對不起，您的瀏覽器不支持audio元素，<br>

您可以通過下載的方式來播放！<br>

<a

href=”audio/horse.mp3”>MP3格式的《horse》下載連接</a>

</audio>在本例中，瀏覽器先判斷是否支持ogg格式，若支持就播放horse.ogg文件，否則繼續(xù)判斷是否支持mp3格式，支持則播放horse.mp3,若兩種格式都不支持，就不能正常播放。如果Web瀏覽器不支持audio元素，就會顯示audio元素的內容。知識準備--audio元素1Src屬性：1video元素用于播放視頻，它的基本語法結構如下：<video

src=“視頻的URL"controls="controls">

</video>提供要顯示視頻的URL。controls屬性：設置是否使用播放控件。知識準備--video元素12video元素的兩個基本屬性只能滿足在網(wǎng)頁中播放視頻的基本需求，video元素還有其他一些屬性，用來進一步優(yōu)化視頻播放效果。其中autoplay屬性、loop屬性、preload屬性、muted等屬性的含義和用法與audio標簽相同，相比audio元素，width屬性、height屬性和poster屬性是video元素獨有的。知識準備--video元素12width屬性:該屬性用來設置視頻畫面的寬度。height屬性:該屬性用來設置視頻畫面的高度。width和height屬性的單位都是像素。注意：如果這兩個屬性都沒有使用，將使用視頻的默認寬度和高度。如果只使用了其中一個屬性，瀏覽器將自動調整另一個屬性的大小以保留視頻的縱橫比。知識準備--video元素1例如下面代碼中，不使用width和height屬性，視頻畫面按原始尺寸播放。<videosrc="video/movie.mp4"controlsautoplay></video>在剛才代碼的基礎上。新增width和height屬性，且屬性值小于原始尺寸，視頻畫面被縮小到指定尺寸播放。<videosrc="video/movie.mp4"width="900px"height="500px"controlsautoplay></video>2poster屬性:該屬性用來設置視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。如果未設置該屬性，則使用視頻的第一幀來代替。通常用于粗略的預覽或者廣告。注意:設置預設圖片時尺寸與視頻畫面盡量相同，或寬度高度比例一致，避免圖片按視頻尺寸被輸出而變形。。不設置預設圖片設置了預設圖片

<video

src="video/movie.mp4"

width="640px"

height="384px"

controls

>

</video><video

src="video/movie.mp4"

width="640px"

height="384px"

controls

poster="img/movie.jpg"

>

</video>知識準備--video元素1

3Source元素與音頻一樣，由于不同瀏覽器對視頻格式的支持情況不同，在不知道用戶瀏覽器的情況下，可以在video元素中使用source元素指定多種視頻文件格式，瀏覽器按照代碼的先后順序，選擇第一個可識別的編碼。Source元素有兩個主要屬性，一個是Src屬性，功能和video元素的Src屬性是一樣的。另一個是Type屬性，主要是給出播放視頻的MIME類型，主要類型有:video/webm、video/mp4、video/ogg等，由于同一種視頻格式里面的視頻編解碼器或音頻編解碼器可以是不一樣的，我們可以將codecs參數(shù)添加進去寫成：type='video/webm;codecs="vp9,opus"'的形式。知識準備--video元素1

3代碼執(zhí)行過程為：使用source元素在設置多個視頻來源，瀏覽器會檢查是否支持mp4格式，若支持就播放該格式視頻，否則繼續(xù)判斷是否支持webm格式,支持則播放webm視頻…依次判斷下去，若沒有文件格式可支持，視頻就不能正常播放。<video

width="640px"

height="384px"

controls

>

<source

src="video/flower.mp4"

type='video/mp4;codecs="avc1.4d002a"'>

<source

src="video/flower.webm"

type='video/webm;codecs="vp8,vorbis"'>

<source

src="video/flower.webm"

type='video/webm;codecs="vp9,opus"'>

</video>知識準備--video元素1

4使用網(wǎng)絡視頻資源可以通過以下兩種方式：

第一種方式是直接從Web網(wǎng)站上鏈接視頻到當前頁面，只要把video元素或source元素的URL路徑改為網(wǎng)絡鏈接地址即可，這樣就不用先下載再嵌入。

第二種方式是一些在線視頻提供商例如優(yōu)酷、Bilibili等提供現(xiàn)成的代碼用于為你的web網(wǎng)頁嵌入視頻。獲取網(wǎng)絡視頻資源的網(wǎng)絡鏈接地址獲取在線視頻平臺提供的嵌入代碼知識準備--video元素1

4<video

src="/i/movie.mp4"

controls

></video><iframe

src="http:///player.html?isOutside=true&aid=585465570&bvid=BV1hz4y1k7jf&cid=262150483&p=1"

scrolling="no"

border="0"

frameborder="no"

framespacing="0"

allowfullscreen="true">

</iframe>知識準備--video元素1

4知識準備--video元素1在使用網(wǎng)絡視頻資源時，需要注意的事項：（1）確保視頻資源的合法使用權限選擇嵌入的網(wǎng)絡視頻時，務必確認視頻內容是可以合法共享或公開使用的。（2）考慮視頻鏈接的穩(wěn)定性和可靠性直接鏈接外部視頻文件時，需意識到視頻托管站點的穩(wěn)定性和持久性對自己網(wǎng)頁的影響。

實戰(zhàn)演練—制作“音樂播放器”網(wǎng)頁2本次任務主要是利用audio元素、flex布局、流式布局等知識點完成“音樂播放器”的制作，分為上部的左右兩部分（左側圖片和右側歌詞）以及下部的音頻控件。并要求能適應不同尺寸的瀏覽器寬度。預覽效果如下圖所示。

實戰(zhàn)演練—制作“音樂播放器”網(wǎng)頁2“音樂播放器”制作思路為用一個類名為player-container的div元素作為容器，再在類名為player-container的div元素里創(chuàng)建兩個div,一個是類名為upper-part，用于“音樂播放器”的上部布局，一個是類名為lower-part，用于“音樂播放器”的下部布局。上部左部用一個類名為left-panel的div,包含一個img元素實現(xiàn)音樂圖片部分，右部用一個類名為right-panel的div,包含h2和p元素實現(xiàn)歌詞部分。下部用audio元素實現(xiàn)音頻控件。通過流式布局實現(xiàn)網(wǎng)頁能適應不同尺寸的瀏覽器寬度。

可以分成四步來完成：首先制作“音樂播放器”的HTML結構代碼；其次編寫基礎CSS代碼；接著通過彈性布局實現(xiàn)“音樂播放器”上部；最后設置下部樣式。

進階訓練—制作“視頻播放器”網(wǎng)頁3本次任務主要是利用video元素、button元素、video對象的屬性、video對象的方法和video對象的事件、JavaScript等知識點完成“視頻播放器”的制作，分為上下兩部分，上部為按鈕區(qū)以此為“播放”、“放大”、“縮小”和“普通”四個按鈕，單擊“播放”按鈕后，按鈕名稱就變成了“暫停”；下部為視頻區(qū)域，視頻本身不帶播放控件，受上部按鈕的播放、暫停以及調整尺寸控制。預覽效果如右圖所示。

進階訓練—制作“視頻播放器”網(wǎng)頁3使用DOM控制audio和video對象audio和video對象是audio和video元素在JavaScript中對應的對象模型。HTML5DOM為audio和video對象提供了方法、屬性和事件。通過這些方法、屬性和事件，開發(fā)者可以創(chuàng)建自定義的播放控制界面，實現(xiàn)播放、暫停、音量控制、進度條顯示等功能，并能響應播放過程中的各種狀態(tài)變化，從而為用戶提供更加豐富和交互式的多媒體體驗。

進階訓練—制作“視頻播放器”網(wǎng)頁3HTML5為audio/video對象提供了一系列事件，使得開發(fā)者能夠監(jiān)聽和響應多媒體內容的播放、暫停、加載、結束等多種狀態(tài)變化。

事件描述canplay當瀏覽器可以開始播放音頻/視頻時觸發(fā)canplaythrough當瀏覽器可在不因緩沖而停頓的情況下進行播放時觸發(fā)durationchange當音頻/視頻的時長已更改時觸發(fā)ended當目前的播放列表已結束時觸發(fā)loadeddata當瀏覽器已加載音頻/視頻的當前幀時觸發(fā)loadedmetadata當瀏覽器已加載音頻/視頻的元數(shù)據(jù)時觸發(fā)loadstart當瀏覽器開始查找音頻/視頻時觸發(fā)pause當音頻/視頻已暫停時觸發(fā)play當音頻/視頻已開始或不再暫停時觸發(fā)progress當瀏覽器正在下載音頻/視頻時觸發(fā)volumechange當音量已更改時觸發(fā)

進階訓練—制作“視頻播放器”網(wǎng)頁3

下面通過案例8-9演示使用play事件為視頻添加開始播放事件，當視頻開始播放時彈出“歡迎觀看視頻，調整好坐姿，準備進入精彩的世界！”的文字提升。

<videosrc="video/friday.mp4"width="320px"height="240px"controlsid="myVideo"></video><script>document.getElementById("myVideo").addEventListener("play",function(){alert("歡迎觀看視頻，調整好坐姿，準備進入精彩的世界！");});</script>

進階訓練—制作“視頻播放器”網(wǎng)頁3

audio/video對象提供的方法主要是控制音頻或視頻的播放狀態(tài)，通過執(zhí)行這些方法可以更方便地對視頻或音頻進行暫停、播放、重載和停止等操作。

方法描述play()開始播放音頻或視頻。如果媒體已經(jīng)暫停或停止，這個方法會使媒體繼續(xù)播放pause()暫停當前播放的音頻或視頻。如果媒體正在播放，調用此方法會暫停播放load()重新加載音頻或視頻元素。這主要用于在更改了src屬性后重新加載媒體文件。canPlayType(type)靜態(tài)方法，用于檢查當前瀏覽器是否能夠播放指定的媒體類型。type參數(shù)是一個MIME類型字符串，如'video/mp4;'addEventListener(event,listener[,options])為音頻或視頻元素添加指定事件類型的事件監(jiān)聽器removeEventListener(event,listener[,options])移除之前添加的事件監(jiān)聽器addTextTrack()向音頻/視頻添加新的文本軌道

進階訓練—制作“視頻播放器”網(wǎng)頁3下面通過案例8-10演示使用play（）和pause（）方法控制視頻的播放狀態(tài)，按下s鍵視頻會播放，按下p鍵視頻會暫停。

<videosrc="video/friday.mp4"width="320px"height="240px"controlsid="myVideo"></video><script>document.addEventListener('keydown',function(event){varvideo=document.getElementById('myVideo');if(event.key==='s'){video.play();console.log("視頻已播放");}elseif(event.key==='p'){video.pause();console.log("視頻已暫停");}});</script>

進階訓練—制作“視頻播放器”網(wǎng)頁3

audio/video對象的屬性主要時設置或查看視頻/音頻的各項播放設定，包括播放速度、播放狀態(tài)、音量等。

屬性描述屬性值或返回值src獲取或設置音頻/視頻資源的URL字符串類型，例如"path/to/myMediaFile.mp4"currentSrc獲取當前正在播放的音頻/視頻資源的URL字符串類型，實際加載的資源地址currentTime獲取或設置音頻/視頻中的當前播放位置（以秒計）浮點數(shù)，表示秒數(shù)duration:獲取當前音頻/視頻的總時長（如果可用）浮點數(shù)，表示秒數(shù)，不可設置paused檢查音頻/視頻是否處于暫停狀態(tài)布爾值，true表示暫停，false表示播放中ended檢查音頻/視頻是否已播放完畢布爾值，true表示播放結束，false表示還在播放或未開