定義播放器

demo地址 歡迎star ^-^

 

一、H5多媒體標籤介紹

figure--多媒體語義標籤

figcaption--多媒體區域表體

<video width="400" height="300" src="./chrome.mp4" controls loop autoplay></video>
  <!-- 瀏覽器支持多種視頻格式文件播放的兼容寫法 -->
  <video controls>
    <source src="./chrome.mp4">
    <source src="./chrome.ogg">
    <source src="./chrome.webm">
  </video>
controls：播放器控制欄
autoplay：自動播放
loop：設置循環播放
注意：audio標籤的屬性與video標籤的屬性同樣

二、API

pause()  暫停當前播放的音頻/視頻

play()  開始播放音頻/視頻

canplay  當瀏覽器能夠播放音頻/視頻時

duration  返回當前音頻/視頻的長度（以秒計）

play()  開始播放音頻/視頻

pause()  暫停當前播放的音頻/視頻

timeupdate  當目前的播放位置已更改時

currentTime  設置或返回音頻/視頻中的當前播放位置（以秒計）

ended  返回音頻/視頻的播放是否已結束

三、設置自定義播放器

思路分析：

第一步：設計多媒體標籤框架

1. 肯定多媒體figure標籤

2. 在figure標籤中建立標題figcaption標籤和播放區域的標籤<div class="player">

3. 在<div class="player"></div> 設置播放窗口<video>和播放控制欄<div class="controls">

4. 播放控制欄包括 播放\暫停按鈕、進度條、時間、全屏等標籤

第二步：實現合理的css樣式

​ 根據需求設計樣式

第三步：經過JS實現功能

獲取所須要的元素

    // 獲取播放器JQ元素
    var $player = $('.player');
    // 獲取播放器JS元素
    var player = $player[0];
    // 獲取video的JQ元素
    var $video = $player.find('video');
    // 獲取video的JS元素
    var video = $video[0];
    // 獲取播放\暫停按鈕
    var $switch = $('.switch');
    // console.log($switch);
    // 進度條
    var $line = $('.line');
    // 當前時間標籤JQ對象
    var $current = $('.current');
    // 總時間JQ對象
    var $total = $('.total');
    // 獲取全屏按鈕
    var $expand = $('.expand');
    // 獲取灰色進度條
    var $bar = $('.bar');

①頁面加載時顯示當前播放的視頻

// ①頁面加載時顯示當前播放的視頻
    video.oncanplay = function () {
      $(this).show();
        // ⑥顯示總的播放時間
      $total.html(formatTime(video.duration));
    };

②點擊播放按鈕 視頻進行播放

③點擊暫停按鈕 視頻進行暫停

    // ②點擊播放按鈕  視頻進行播放
    // ③點擊暫停按鈕  視頻進行暫停
    $switch.on('click',function(){
      if($switch.hasClass('fa-play')){
        $(this).removeClass('fa-play').addClass('fa-pause');
        video.play();
      } else {
        $(this).removeClass('fa-pause').addClass('fa-play');
        video.pause();
      }
    });

④在播放過程當中顯示進度條

⑤在播放過程當中顯示當前的播放時間

⑥顯示總的播放時間(設置在頁面加載時顯示當前播放的視頻)

    // ④在播放過程當中顯示進度條
    // 獲取當前的時間
    video.ontimeupdate = function () {
      // 獲取進度
      var p = video.currentTime / video.duration * 100 + '%';
      $line.css('width',p);
      // ⑤在播放過程當中顯示當前的播放時間
      $current.html(formatTime(video.currentTime));
    }

⑦點擊全屏操做按鈕 播放器全屏

⑧點擊取消全屏按鈕 播放器取消全屏

    // ⑦點擊全屏操做按鈕  播放器全屏 
    // ⑧點擊取消全屏按鈕  播放器取消全屏 
    
    $expand.on('click',function(){
      if($expand.hasClass('fa-arrows-alt')) {
        $expand.removeClass('fa-arrows-alt').addClass('fa-compress');
        player.webkitRequestFullScreen();
      } else {
        $expand.removeClass('fa-compress').addClass('fa-arrows-alt');
        document.webkitCancelFullScreen();
      }
    });
    // 注意:當按esc退出全屏的時候，沒有改變按鈕
    // 這是就要模擬監聽是否全屏。
    window.onresize = function () {
      // 判斷是否全屏
      if(!document.webkitIsFullScreen) {
        $expand.addClass('fa-arrows-alt').removeClass('fa-compress');
      }
    };

⑨點擊進度條 根據位置切換當前播放進度

    // ⑨點擊進度條 根據位置切換當前播放進度 
    $bar.on('click',function(e){
      // 獲取點擊的位置距離元素左側的距離
      var currentTime = e.offsetX / $bar.width() * video.duration;
      video.currentTime = currentTime;
    });

⑩播放結束 重置一下

    // ⑩播放結束 重置一下 
    video.onended = function(){
      video.currentTime = 0;
      $switch.addClass('fa-play').removeClass('fa-pause');
    };

十一、模擬彈幕

    // 模擬彈幕
    $('.send').on('click',function(){
      var text=$('.dm').val();
      $('<span></span>').text(text).css({
        color: 'rgb('+(Math.floor(256 * Math.random())) + ',' + (Math.floor(256 * Math.random())) +','+ (Math.floor(256 * Math.random())),
        position:'absolute',
        right: -100,
        width: 100,
        height:20,
        top: Math.floor( 300 * Math.random())
      }).animate({right:700},6000,function(){
        $(this).remove();
      }).appendTo($player);
    })