使用vue-video-player實現直播的方式
阿新 • • 發佈:2022-01-05
目錄
- 一、安裝-video-player
- 二、使用 vue-video-player
課前準備:直播流協議https://www.cnblogs.com/yangchin9/p/14930874.html
摘要:在H5頁面實現觀看直播+視訊回放;在開發期間使用過video.、mui-player等外掛,發現這些video外掛對移動端的相容性都不友好,最後發現一個在移動端相容不錯的外掛——vue-video-player
場景:
移動端H5頁面,專案是vue搭建的,使用的是HLS協議以m3u8結尾的直播流
一、安裝vue-video-player
播放HLS視訊流需要安裝 videojs-contrib-hls外掛,播放RTMP視訊流則安裝 videojs-flash外掛,hls外掛與flash外掛同時使用時flash外掛需要在hls外掛之前引入;(資料上講安裝vue-video-player時會自動安裝hls外掛,實際操作中並沒有,還是自己手動安裝吧!)
安裝方式1:
CDN方式,直接在html檔案頭部引入檔案: <link rel="stylesheet" href="path/to/video.js/dist/video-js."/> <script type="text/" src="path/to/video.min.js"></script> <script type="text/script" src="path/to/vue.min.js"></script> <script type="text/javascript" src="path/to/dist/vue-video-player.js"> </script> <script type="text/javascript"> Vue.use(window.VueVideoPlayer) </script>
安裝方式2:
點選檢視程式碼
NMP安裝外掛: npm install vue-video-player --save npm install videojs-contrib-hls --save main.js中引入基礎樣式檔案: // 引入videoPlayer樣式 import 'video.js/dist/video-js.css' 按需引入: import 'videojs-contrib-hls' import { videoPlayer } from 'vue-video-player' components: { videoPlayer },全域性引入: import Vue from 'vue' import VueVideoPlayer from 'vue-video-player' // 自定義樣式引入,在<video-player>新增對應類名,例如video-player-custom // import 'vue-video-player/src/custom-theme.css' Vue.use(VueVideoPlayer,/* { options: 全域性預設配置,events: 全域性videojs事件 }*/)
二、使用 vue-video-player
<template> <!-- playsinline:設定播放器在移動裝置上不全屏[ Boolean,default: false ] --> <!-- customEventName:自定義狀態變更時的事件名[ String,default: 'statechanged' ] --> <video-player class="video-player-custom" ref="videoPlayer" :options="plahttp://www.cppcns.comyerOptions" :playsinline="true" customEventName="customstatechangedeventname" @play="onPlayerPlay" @pause="onPlayerPause" @ended="onPlayerEnded" @ready="playerReadied" @statechanged="playerStateChanged" @playing="onPlayerPlaying" @waiting="onPlayerWaiting" @loadeddata="onPlayerLoadeddata" @timeupdate="timeupdate" @canplay="onPlayerCanplay" @canplaythrough="onPlayerCanplaythrough"> </video-player> </template> <script> import 'videojs-contrib-hls' import { videoPlayer } from 'vue-video-player' export default { components: { videoPlayer }, data() { return { playerOptions: { // 是否靜音 muted: true,// 預設為英語,設定為中文 language: 'zh-CN',// 播放速度,指定後Video.js將顯示一個控制元件(vjs-playback-rate類的控制元件),允許使用者選擇播放速度 playbackRates: [0.5,1.0,1.5,2.0],// 將播放器置於流暢模式,並在計算播放器的動態大小時使用該值,表示長寬比例 aspectRatio: '4:3', // 相容順序,預設值是['html5'],其他已註冊的技術將按其註冊的順序在該技術之後新增。 techOrder: ['html5'],// 等同於原生<video>標籤中的一組<source>子標籤,可實現優雅降級;type 屬性規定媒體資源的 MIME 型別 sources: [ //{ //type: "video/mp4", //src: "" //},//{ //type: "rtmp/flv", //src: "" //},{ type: "application/x-mpegURL", src: "https://live.cgtn.com/1000/prog_index.m3u8" },],// 視訊封面 poster: require('./icon/cover.jpg'), } } }, computed: { //外掛節點 用於新增自定義按鈕事件 player() { return this.$refs.videoPlayer.player } },mounted() {},methods: { // 播放回調 onPlayerPlay(player) { },// 暫停回撥 onPlayerPause(player) { //console.log(player) },// 視訊播放結束回撥 onPlayerEnded(player) { //console.log(player) },// DOM元素上的readyState更改導致播放停止 onPlayerWaiting(player) { //console.log(player) },// 已開始播放回調 onPlayerPlaying(player) { //console.log(player) },// 當播放器在當前播放位置下載資料時觸發 onPlayerLoadeddata($event) { //console.log($event) },// 當前播放位置發生變化時觸發。 onPlayerTimeupdate($event) { //console.log($event) },//媒體的readyState為HAVE_FUTURE_DATA或更高 onPlayerCanplay($event) { //console.log($event) },//媒體的readyState為HAVE_ENOUGH_DATA或更高。這意味著可以在不緩衝的情況下播放整個媒體檔案。 onPlayerCanplaythrough($event) { //console.log($event) },//播放狀態改變回調 playerStateChanged($event) { //console.log($event) },//將偵聽器繫結到元件的就緒狀態。與事件監聽器的不同之處在於,如果ready事件已經發生,它將立即觸發該函式。。 playerReadied($event) { //console.log($event) },} } </script> <style lang="scss" scoped> .video-player-custom{ width: 100%; height: 180px; // vidoeUI重寫 /deep/ .video-js{ width: 100%; height: 100%; padding: 0; overflow: hidden; // 播放器 .vjs-tech{ object-fit: cover; } // 播放按鈕 .vjs-big-play-button { position: absolute; top: 50%; www.cppcns.com left: 50%; width: 2em; height: 2em; margin-top: -1em; margin-left: -1em; font-size: 2em; line-height: 2em; border-radius: 50%; backgroundwww.cppcns.com-color: rgba(0,0.45); outline: none; } // 封面 .vjs-poster{ width: 100%; height: 100%; background-size: cover; } } } </style>
到此這篇關於使用vue-video-player實現直播的文章就介紹到這了,更多相關vue-video-player直播內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!