iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
0
Modern Web

JS煉金術:Javascript30+聲光玩轉的Drum Pads系列 第 12

[JS30]DAY11 : Custom HTML5 Video Player

  • 分享至 

  • xImage
  •  

[程式碼&DEMO] [HackMD完整筆記]

目標


1.使用HTML5的video tag做出各種播放器功能

  • 滑動調節音量以及播放速度
  • 按鈕點擊快進、回退
  • 可點擊影片畫面或按鈕播放/暫停視頻播放
  • 點擊或拖動進度條去改變影片播放處

2.使程式更精簡,去除耦合

步驟流程


使 去控制
用=========>

Video 執行
狀 =============>

(相對應) 觸發
事 =================>
件 .addEventListener

updateButton()


學習筆記


video對象的各種屬性、方法和事件:

  • paused: video的屬性,去判斷是否在播放。
  • play( ): 方法,可以播放影片。
  • pause( ) :方法,可以暫停播放。
  • currentTime: video的屬性,用以設置影片當前的時間。
  • [補充]controls:video的屬性。
    (若不需客製化,可用此屬性完成基本播放器設置)
    如果此屬性存在,則瀏覽器將提供允許用戶控制影片播放,音量,搜索和暫停/繼續播放。

觀念: 影片改變了狀態,才去更新畫面。按鈕是跟隨著影片狀態去改變,我們只要去操作影片狀態。 這是因為,除了點擊播放/暫停按鈕以外,我們還可以通過鍵盤快捷鍵、第三方插件甚至耳機上的操作按鈕等其他方式來控制。因此,通過本身的播放狀態來判斷是最不容易出錯的。

  • 判斷播放狀態

    寫一個togglePlay方法,根據影片的播放狀態來判斷該執行.play()方法或.pause()方法。

    function togglePlay() {
        if (video.paused) {
            video.play();
        } else (
            video.pause();
        )
    }
    video.addEventListener('click', togglePlay);
    toggle.addEventListener('click', togglePlay);
    

    三元運算子

    function tooglePlay() {
        video.paused ? video.play() : video.pause()
    }
    

    字符串來執行屬性方法

    video [method] ( )=video.play( )
    但不能寫成video.method( ),因為這樣就變成呼叫video底下的function method。
    使用中括號[]包起來的會自動變成字串,取其物件屬性,再去做呼叫。

    function tooglePlay() {
        const method = vidoe.paused ? 'play' : 'pause';
        video[method]();
    
    }
    
  • 圖標的切換

    在調用 updateButton 的時候,這個方法已經被綁定在了 addEventListener 的調用者上,也就是綁定到了 video 上。因此,this.paused 在這裡就相當於 video.paused。

    // 邏輯
    function updateButton() {
        const icon = this.paused ? '►' : '❚ ❚';
        toggle.textContent = icon;
    }
    // 事件
    video.addEventListener('play', updateButton);
    video.addEventListener('pause', updateButton);
    

    快退/快進按鍵添加 data-skip 屬性,對應的值為快退/快進的秒數。
    data-** 此屬性需通過.dataset.**來取得。

    // 邏輯
    function skip() {
    video.currentTime += parseFloat(this.dataset.skip);
    }
    // 事件
    skipButtons.forEach(button => button.addEventListener('click', skip));
    

    parseFloat

    因為我們獲取到的是字串,所以要通過 parseFloat 轉換。

    function skip() {
        video.currentTime += parseFloat(this.dataset.skip);
    }
    
  • 進度條操作

    flexBasis

    progress_filled是一个 flex 定位的元素,改變它的 flex-basis 的百分比值就可以調整它所占的父元素寬度。flex-basis 值代表 flex 元素在主軸方向上的初始尺寸。

    // 根据当前播放时间来调节进度条
    function handleProgress() {
    const percent = (video.currentTime / video.duration) * 100;
    progressBar.style.flexBasis = `${percent}%`;
    }
    

    mouseEvent的滑鼠座標

    offsetX屬性: 該屬性代表鼠標單擊位置相位對於該元素的水平偏移。得到後轉換計算出該位置的百分比,同時也就知道了進度條的百分比。


上一篇
[JS30]DAY10 : Hold Shift to Check Multiple Checkboxes
下一篇
[JS30]DAY12 : Key Sequence Detection (KONAMI CODE)
系列文
JS煉金術:Javascript30+聲光玩轉的Drum Pads30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言