欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3使用videojs播放m3u8格式視頻教程

 更新時間：2023年06月08日 12:08:28   作者：深巷的九  
m3u8是一種基于HTTP Live Streaming（HLS）文件視頻格式,它主要是存放整個視頻的基本信息和分片(Segment)組成,下面這篇文章主要給大家介紹了關(guān)于vue3使用videojs播放m3u8格式視頻的相關(guān)資料,需要的朋友可以參考下

vue3使用videojs 播放m3u8格式視頻

videojs是一個播放視頻的js庫，可以通過videojs結(jié)合videojs-contrib-hls實播放m3u8格式視頻。流媒體傳輸協(xié)議(hls)定義了用來控制播放的m3u8文件

m3u8是一個文本文件(播放列表文件)，里面的內(nèi)容就是被播放的音視頻文件路徑或網(wǎng)址。存放了視頻的基本信息和分段視頻的索引地址。就是按順序下載播放索引列表的視頻，從而完成一部完整視頻的播放。

先在項目中安裝videojs。

npm install --save video.js
npm install --save videojs-contrib-hls

下載成功后在項目的package.json文件中，有這兩行代碼。

在需要播放視頻的頁面中引入videojs

import 'video.js/dist/video-js.css';
import videojs from 'video.js';

在vue頁面中加入video標簽。

class="video-js vjs-default-skin"是videojs自帶的樣式需要加上，否則視頻樣式會有問題，style="width: 100%;height: 100%; object-fit: fill" 這行代碼是為了使視頻占滿div容器。

 <div class="vedio">
      <video id="valveVideogj" class="video-js vjs-default-skin" autoplay
             style="width: 100%;height: 100%; object-fit: fill"></video>
</div>

在onMounted節(jié)點初始化播放器。

videojs函數(shù)有三個參數(shù)，分別為video標簽id(id必須要唯一)，要實例化的videojs配置，以及回調(diào)函數(shù)。options(rtsp)函數(shù)，rtsp為視頻地址。http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8(網(wǎng)上找的m3u8格式視頻)

  function options(src) {
            return {
                autoplay: true, // true,瀏覽器準備好時開始播放。
                muted: true, // 默認情況下將會消除音頻。
                loop: true, // 導致視頻一結(jié)束就重新開始。
                controls: false, //取消視頻中的進度條
                preload: 'auto', // auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
                language: 'zh-CN',  //漢化
                fluid: true, // 當true時，將按比例縮放以適應(yīng)其容器。
                sources: [{
                    type: 'application/x-mpegURL',
                    src  //視頻播放地址
                }],
                notSupportedMessage: '此視頻暫無法播放，請稍后再試', // 無法播放媒體源時顯示的默認信息。
                textTrackDisplay: false,
            }
        }
  let player;
  onMounted(() => {
		try {
                player = videojs("valveVideo", options(rtsp), () => {
                    player.play();
                });
            } catch (error) {
                console.log(error);
            }	
    	})

播放效果圖

視頻的大小可以通過改變外層div容器的大小來改變。

.vedio {
	width: 632.89px;
  	height: 356px;
    background: #000;
    padding: 3px;
    border: 1px solid #707070;
    margin: 30px 30px 0 30px;
}

ps

從其他頁面返回到該頁面會碰到video.es.js:228 videojs: warn: player "valvevideogj" is already initialised. options will not be applied.錯誤

則是因為播放器已經(jīng)初始化過了，不能重復(fù)調(diào)用video標簽作用于同一個video id，需要離開頁面是銷毀video，再重新初始化。

        onUnmounted(() => {
            //離開頁面時銷毀video
            player.dispose()
        })

總結(jié)

到此這篇關(guān)于vue3使用videojs播放m3u8格式視頻的文章就介紹到這了,更多相關(guān)videojs播放m3u8視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論