CodeGym /Java Adesua /Frontend SELF TW /多媒體元素的屬性

多媒體元素的屬性

Frontend SELF TW

等級 6 , 課堂 5

開放

5.1 其他屬性

HTML5 的多媒體元素，比如 <audio> 和 <video>，提供了很多屬性來控制多媒體內容的播放。了解這些屬性能幫助創建更互動和方便的網頁，適應用戶的不同需求。接下來我們會詳細介紹 <audio> 和 <video> 元素的其他屬性。

crossorigin 屬性

crossorigin 屬性告訴瀏覽器如何處理來自其他域名的多媒體文件請求。該屬性可以有兩個值：

anonymous: 請求不包括憑證（cookies、授權頭等）
use-credentials: 請求包含憑證

範例：

HTML

    
      <audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
      <video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>

<source> 元素的屬性

<source> 標籤被用於 <audio> 和 <video> 元素內，指定多個多媒體內容來源。這有助於確保跨瀏覽器的兼容性，因為不同的瀏覽器可能支持不同的格式。

範例：

HTML

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>

字幕和文本軌道的屬性

HTML5 提供了一個 <track> 標籤來添加字幕、文本軌道和描述。這個元素支持多種文本軌道類型，比如字幕、描述和章節。

範例：

HTML

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
        Your browser does not support the video element.
      </video>

5.2 使用 JavaScript 控制多媒體元素

<audio> 和 <video> 元素提供了 API 來通過 JavaScript 控制播放。這允許創建自定義控件並實現複雜的播放場景。

範例：

HTML

    
      <video id="myVideo" src="videofile.mp4" controls></video>
      <button onclick="playVideo()">Play</button>
      <button onclick="pauseVideo()">Pause</button>
      <button onclick="stopVideo()">Stop</button>

JavaScript

    
      const video = document.getElementById("myVideo");

      function playVideo() {
        video.play();
      }

      function pauseVideo() {
        video.pause();
      }

      function stopVideo() {
        video.pause();
        video.currentTime = 0;
      }

在這個範例中，按鈕允許通過 JavaScript 播放、暫停和停止視頻。

5.3 多媒體元素的事件

<audio> 和 <video> 元素支持許多事件，這些事件允許監控和響應播放狀態的變化。

主要事件：

play: 當開始播放時發生
pause: 當播放暫停時發生
ended: 當播放結束時發生
timeupdate: 隨著當前播放時間的變化週期性發生

使用事件的範例：

HTML

    
      <video id="myVideo" src="videofile.mp4" controls></video>

JavaScript

    
      const video = document.getElementById("myVideo");

      video.addEventListener('play', function() {
        console.log('Video started playing');
      });

      video.addEventListener('pause', function() {
        console.log('Video paused');
      });

      video.addEventListener('ended', function() {
        console.log('Video ended');
      });

      video.addEventListener('timeupdate', function() {
        console.log('Current time: ' + video.currentTime);
      });