vue+node 實現(xiàn)視頻在線播放的實例代碼

更新時間：2020年10月19日 09:45:42 作者：Memory_Space-2020

這篇文章主要介紹了vue+node 實現(xiàn)視頻在線播放的實例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1.node服務端

數(shù)據(jù)流傳輸，可在線緩存

//獲取參數(shù)
  var params=urldeal.parse(req.url,true).query
  const ROOT_PATH = process.cwd();//必須使用絕對路徑，使用相對路徑會直接下載文件
  let path =ROOT_PATH+params.url;

  let stat = fs.statSync(path); //獲取文件信息
  let fileSize = stat.size;
  let range = req.headers.range;

  if (range) {
    //有range頭才使用206狀態(tài)碼

    let parts = range.replace(/bytes=/, "").split("-");
    let start = parseInt(parts[0], 10);
    let end = parts[1] ? parseInt(parts[1], 10) : start + 9999999;

    // end 在最后取值為 fileSize - 1
    end = end > fileSize - 1 ? fileSize - 1 : end;

    let chunksize = (end - start) + 1;
    let file = fs.createReadStream(path, { start, end });
    let head = {
      'Content-Range': `bytes ${start}-${end}/${fileSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': chunksize,
      'Content-Type': 'video/mp4',
    };
    res.writeHead(206, head);
    file.pipe(res);     //Node中的Server端HTTP response是Writable流
  } else {
    let head = {
      'Content-Length': fileSize,
      'Content-Type': 'video/mp4',
    };
    res.writeHead(200, head);
    fs.createReadStream(path).pipe(res);
  }

2.vue客戶端

1.安裝video-player插件

cnpm install vue-video-player --save

2.組件中引用

 <video-player class="video-player vjs-custom-skin"
         ref="videoPlayer"
         :playsinline="true"
         :options="playerOptions"
 ></video-player>

3.調(diào)用的data中的數(shù)據(jù)

 data() {
  return {
   // 視頻播放
   playerOptions: {
    playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
    autoplay: false, //如果true,瀏覽器準備好時開始回放。
    muted: false, // 默認情況下將會消除任何音頻。
    loop: false, // 導致視頻一結束就重新開始。
    preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
    language: 'zh-CN',
    aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數(shù)字（例如"16:9"或"4:3"）
    fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
    sources: [{
     type: "",
     //src: require('@/assets/'+this.vurl)//url地址
      src: 'http://localhost:10086/videos?url=/public/videos/'+this.vurl, //url地址，請求中需要包含具體的視頻文件名
    }],
    poster: '', //你的封面地址
    // width: document.documentElement.clientWidth,
    notSupportedMessage: '此視頻暫無法播放，請稍后再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
    controlBar: {
     timeDivider: true,
     durationDisplay: true,
     remainingTimeDisplay: false,
     fullscreenToggle: true //全屏按鈕
    }
   }
  }
 },

附錄：vue+flvjs播放直播流FLV，分頁時如何斷開之前直播流解決辦法

使用flvjs庫同時播放flv文件，需要分頁發(fā)現(xiàn)，之前直播流沒有斷開，很影響性能，網(wǎng)上查閱借鑒下邊代碼實現(xiàn)斷開上頁直播流

// 銷毀播放器實例
  closePlayer() {
   if (this.player.length > 0) {
    this.player.forEach((item) => {
     item.destroy(true);
     item.off('ended', function () {});
     item.off('error', function () {});
     item = null;
    });
    this.player = [];
   }
  },
// 初始化播放器
  initPlayer(id, url, img) {
   let doms = document.getElementById(id);
   doms.innerHTML = '';
   this.player.push(
    new FlvPlayer({
     id: id,
     url: url,
     poster: img,
     isLive: true,
     autoplay: true,
     volume: id == 'videos0' ? 0.5 : 0,
     preloadTime: 10,
     minCachedTime: 5,
     cors: true,
    })
   );
   this.player[this.player.length - 1].on('ended', () => {
    //事件名稱可以在上述查詢
    this.getLivingList();
   });
   this.player[this.player.length - 1].on('error', () => {
    //事件名稱可以在上述查詢
    this.getLivingList();
   });
  },
// 翻頁操作
  currentChange(e) {
   this.closePlayer();
   this.pageno = e;
   this.getLivingList();
  },
  // 獲取直播中的列表
  async getLivingList() {
   let res = await this.$req(api.liveShowers, {
    ...this.searchForm,
    pageno: this.pageno - 1,
    pagesize: this.pagesize,
   });
   console.log(res);
   if (res.code == 200) {
    // 獲取到數(shù)據(jù)，賦值然后循環(huán)實例化
    res.data.showers.push(res.data.showers[0]);
    res.data.showers.push(res.data.showers[0]);
    res.data.showers.push(res.data.showers[0]);
    res.data.showers.push(res.data.showers[0]);
    this.livingList = res.data.showers;
    this.totalP = res.data.total_page - 0;
    this.totalS = res.data.total_showers;
    this.isrefresh = false;
    if (this.livingList.length > 0) {
     setTimeout(() => {
      this.livingList.forEach((item, idx) => {
       let domid = 'videos' + idx;
       this.initPlayer(
        domid,
        item.play_url,
        this.$store.state.coverTop + item.showcover
       );
      });
     }, 400);
    } else {
     // 如果返回沒有直播數(shù)據(jù)又不是第一頁。就跳到第一頁再請求一下
     if (this.pageno > 1) {
      this.pageno = 1;
      this.getLivingList();
     }
    }
   }
  },

總結

到此這篇關于vue+node 實現(xiàn)視頻在線播放的實例代碼的文章就介紹到這了,更多相關vue視頻在線播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: