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

如何在vue中使用video.js播放m3u8格式的視頻

 更新時(shí)間:2021年02月01日 16:49:21   作者:下一秒  
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下

@[toc] 注意:

 "vue": "^2.6.11",
 "video.js": "^7.10.2",
 "videojs-contrib-hls": "^5.15.0",
 "mux.js": "^5.7.0"

一、安裝

yarn add video.js
yarn add videojs-contrib-hls // 這是播放hls流需要的插件
yarn add mux.js // 在vue項(xiàng)目中,若不安裝它可能報(bào)錯(cuò)

二、引入videojs

1.在src文件夾下新建 plugins文件夾,并新建video.js文件;

video.js文件的內(nèi)容如下:

import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
import Vue from "vue";
Vue.use(hls);

2.在main.js中引入剛剛的video.js文件

import "./plugins/video.js"; // 引入剛剛定義的video.js文件

三、在組件中測試并使用

1. 實(shí)現(xiàn)基本的自動(dòng)播放

Test.vue文件

<template>
 <div class="test-videojs">
 <video id="videoPlayer" class="video-js" muted></video>
 </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs 
export default {
 data() {
 return {
 // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 是一段視頻,可將cctv1 (是live現(xiàn)場直播,不能快退)的替換為它,看到快進(jìn)快退的效果
  nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
 };
 },
 mounted() {
 this.initVideo(this.nowPlayVideoUrl);
 },
 methods: {
 initVideo(nowPlayVideoUrl) {
  // 這些options屬性也可直接設(shè)置在video標(biāo)簽上,見 muted
  let options = {
  autoplay: true, // 設(shè)置自動(dòng)播放
  controls: true, // 顯示播放的控件
  sources: [
   // 注意,如果是以option方式設(shè)置的src,是不能實(shí)現(xiàn) 換臺(tái)的 (即使監(jiān)聽了nowPlayVideoUrl也沒實(shí)現(xiàn))
   {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // 告訴videojs,這是一個(gè)hls流
   }
  ]
  };
  // videojs的第一個(gè)參數(shù)表示的是,文檔中video的id
  const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
  console.log("onPlayerReady 中的this指的是:", this); // 這里的this是指Player,是由Videojs創(chuàng)建出來的實(shí)例
  console.log(myPlyer === this); // 這里返回的是true
  });
 }
 }
};
</script>
<style lang="scss">
#videoPlayer {
 width: 500px;
 height: 300px;
 margin: 50px auto;
}
</style>

視頻播放效果如圖:

打印結(jié)果如圖:

2. 實(shí)現(xiàn)換臺(tái)

Test.vue文件

<template>
 <div class="test-videojs">
 <video id="videoPlayer" class="video-js"></video>
 <el-button type="danger" @click="changeSource">切換到CCTV3</el-button>
 </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs
export default {
 data() {
 return {
  nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
  options: {
  autoplay: true, // 設(shè)置自動(dòng)播放
  muted: true, // 設(shè)置了它為true,才可實(shí)現(xiàn)自動(dòng)播放,同時(shí)視頻也被靜音 (Chrome66及以上版本,禁止音視頻的自動(dòng)播放)
  preload: "auto", // 預(yù)加載
  controls: true // 顯示播放的控件
  },
  player:null
 };
 },
 mounted() {
 this.getVideo(this.nowPlayVideoUrl);
 },
 methods: {
 getVideo(nowPlayVideoUrl) {
  this.player = Videojs("videoPlayer", this.options);
  //關(guān)鍵代碼, 動(dòng)態(tài)設(shè)置src,才可實(shí)現(xiàn)換臺(tái)操作
  this.player.src([
  {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // 告訴videojs,這是一個(gè)hls流
  }
  ]);
 },
 changeSource() {
  this.nowPlayVideoUrl = "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8";
  console.log(this.nowPlayVideoUrl, "改變了");
 }
 },
 watch: {
 nowPlayVideoUrl(newVal, old) {
  this.getVideo(newVal);
 }
 },
 beforeDestroy() {
 if (this.player) {
  this.player.dispose(); // Removing Players,該方法會(huì)重置videojs的內(nèi)部狀態(tài)并移除dom
 }
 }
};
</script>
<style lang="scss">
#videoPlayer {
 width: 500px;
 height: 300px;
 margin: 50px auto;
}
</style>

視頻切換效果如圖:

四、踩坑小記

1. 視頻不能自動(dòng)播放 或報(bào)錯(cuò) DOMException: play() failed

需用muted屬性解決

報(bào)錯(cuò)信息:DOMException: play() failedbecause the user didn't interact with the document first.(用戶還沒有交互,不能調(diào)用play)

解決辦法:設(shè)置muted屬性為true

 <video id="videoPlayer" class="video-js" muted></video>

關(guān)于muted屬性:

  • muted 屬性,設(shè)置或返回音頻是否應(yīng)該被靜音(關(guān)閉聲音);屬性的值是true和false;
  • muted="false" 表示視頻不用靜音(視頻播放便有聲音),但設(shè)置 muted="fasle" 的情況下,視頻無法實(shí)現(xiàn)自動(dòng)播放。
  • video 標(biāo)簽中 muted 的作用: 允許視頻自動(dòng)播放;(Chrome66版本開始,禁止視頻和音頻的自動(dòng)播放)

2. 換臺(tái)的時(shí)候,url已經(jīng)成功更改,但視頻還是之前的

需得動(dòng)態(tài)設(shè)置src才能實(shí)現(xiàn)

// 動(dòng)態(tài)設(shè)置src
this.player.src([
  {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // 告訴videojs,這是一個(gè)hls流
  }
 ]);

3. 找不到mux.js模塊

報(bào)錯(cuò)信息:* mux.js/lib/tools/parse-sidx in ./node_modules/video.js/dist/video.es.js To install it, you can run: npm install --save mux.js/lib/tools/parse-sidx

解決辦法:安裝mux.js

yarn add mux.js

五、 播放rtmp流

播放rtmp流的操作與播放hls流的操作幾乎相同,不同在于:

import "videojs-flash"; // 播放rtmp流需要的插件
type: 'rtmp/flv', // 這個(gè)type值必寫, 告訴videojs這是一個(gè)rtmp流視頻

以上就是如何在vue中使用video.js 播放m3u8格式的視頻的詳細(xì)內(nèi)容,更多關(guān)于vue 使用videojs 播放m3u8格式的視頻的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue3中addEventListener的用法詳解

    vue3中addEventListener的用法詳解

    vue3中定義全局指令時(shí),往往會(huì)碰到一個(gè)問題:事件無法解綁,為什么會(huì)這樣,因?yàn)橥ǔT谥噶畹膍ounted鉤子中綁定事件,事件處理函數(shù)也定義在mounted中,本文講給大家講講vue3中addEventListener的妙用,需要的朋友可以參考下
    2023-08-08
  • 如何把vuejs打包出來的文件整合到springboot里

    如何把vuejs打包出來的文件整合到springboot里

    這篇文章主要介紹了如何把vuejs打包出來的文件整合到springboot里,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-07-07
  • vue中$nexttick,$set,$forceupdate的區(qū)別

    vue中$nexttick,$set,$forceupdate的區(qū)別

    本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證

    vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證

    這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue多功能渲染函數(shù)h()的使用和多種應(yīng)用場景

    vue多功能渲染函數(shù)h()的使用和多種應(yīng)用場景

    我們在vue項(xiàng)目里面用HTML標(biāo)簽構(gòu)建頁面時(shí)最終會(huì)被轉(zhuǎn)化成vnode,而h()是直接創(chuàng)建vnode,因此h()能以一種更靈活的方式在各種各樣情景下構(gòu)建組件的渲染邏輯,并且能帶來性能方式的提升,本文介紹如何使用和列出具體的應(yīng)用場景,需要的朋友可以參考下
    2024-08-08
  • uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條功能

    uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條功能

    這篇文章主要介紹了uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條,需要的朋友可以參考下
    2019-11-11
  • VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語法錯(cuò)誤的解決

    VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語法錯(cuò)誤的解決

    這篇文章主要介紹了VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語法錯(cuò)誤的解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • 使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache

    使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache

    這篇文章主要介紹了使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法

    Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法

    Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法,需要的朋友可以參考下
    2019-12-12
  • vue組件父與子通信詳解(一)

    vue組件父與子通信詳解(一)

    這篇文章主要為大家詳細(xì)介紹了vue組件父與子通信詳解,實(shí)現(xiàn)登錄窗口,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11

最新評論