vue2 使用liveplayer加載視頻

官網: https://www.liveqing.com/docs/manuals/LivePlayer.html

• 支持WebRTC/MP4播放;
• 支持m3u8/HLS播放;
• 支持HTTP-FLV/WS-FLV/RTMP播放;
• 支持直播和點播播放;
• 支持播放器快照截圖;
• 支持點播多清晰度播放;
• 支持全屏或比例顯示;
• 自動檢測IE瀏覽器兼容播放;
• 支持自定義疊加層;

• 安裝

npm install @liveqing/liveplayer@2.7.35
# 安裝 copy-webpack-plugin 插件,用于復制依賴到public下
npm install copy-webpack-plugin@4.6.0

• 配置vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');module.exports = {configureWebpack: {plugins: [new CopyWebpackPlugin([{ from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},])]}}

• 在index.html中引入 liveplayer-lib.min.js

 <script src="js/liveplayer-lib.min.js"></script>

• 創建組件SDVideoPlayer.vue

<template><LivePlayerref="livePlayerRef":videoUrl="url":videoTitle="videoTitle":poster="poster":controls="controls":loop="loop":fluent="fluent":autoplay="autoplay":live="live":stretch="stretch":alt="alt":muted="muted":aspect="aspect":timeout="timeout":showCustomButton="showCustomButton":hideBigPlayButton="hideBigPlayButton":hideSnapshotButton="hideSnapshotButton":hideFullscreenButton="hideFullscreenButton":hideFluentButton="hideFluentButton":hideStretchButton="hideStretchButton":resolution="resolution":resolutiondefault="resolutiondefault":playbackRates="playbackRates":playbackRate="playbackRate":hasaudio="hasaudio":hasvideo="hasvideo":customButtons="customButtons":autofocus="autofocus":dblclickFullscreen="dblclickFullscreen":language="language":waterMark="waterMark":digitalZoom="digitalZoom"@message="handleMessage"@error="handleError"@ended="handleEnded"@timeupdate="handleTimeupdate"@pause="handlePause"@play="handlePlay"@fullscreen="handleFullscreen"@snapOutside="handleSnapOutside"@snapInside="handleSnapInside"@customButtons="handleCustomButtons"@canplay="handleCanplay"@volumechange="handleVolumechange"></LivePlayer>
</template><script>
import LivePlayer from '@liveqing/liveplayer';export default {components: { LivePlayer },props: {/*** 視頻地址*/url: {type: String,default: '',},/*** 視頻右上角顯示的標題*/videoTitle: {type: String,default: '',},/*** 視頻封面圖片*/poster: {type: String,default: '',},/*** 自動播放*/autoplay: {type: Boolean,default: true,},/*** 顯示播放器控制欄*/controls: {type: Boolean,default: true,},/*** 是否循環播放*/loop: {type: Boolean,default: false,},/*** 是否直播, 標識要不要顯示進度條*/live: {type: Boolean,default: false,},/*** 視頻流地址沒有指定情況下, 視頻所在區域顯示的文字,相當于 html img 標簽的 alt 屬性*/alt: {type: String,default: '無信號',},/*** 是否靜音*/muted: {type: Boolean,default: true,},/*** 視頻顯示區域的寬高比,fullscreen 即是全屏展示*/aspect: {type: String,default: '16:9',},/***  流暢模式*/fluent: {type: Boolean,default: true,},/***  是否拉伸*/stretch: {type: Boolean,default: false,},/***  m3u8 加載超時(秒)*/timeout: {type: Number,default: 20,},/***  是否在工具欄顯示自定義按鈕(極速/流暢, 拉伸/標準)*/showCustomButton: {type: Boolean,default: true,},/***  是否隱藏起播狀態下的大播放按鈕*/hideBigPlayButton: {type: Boolean,default: false,},/***  是否隱藏 快照 按鈕*/hideSnapshotButton: {type: Boolean,default: false,},/***  是否隱藏 全屏 按鈕*/hideFullscreenButton: {type: Boolean,default: false,},/***  是否隱藏 極速/流暢 按鈕*/hideFluentButton: {type: Boolean,default: false,},/***  是否隱藏 拉伸/標準 按鈕*/hideStretchButton: {type: Boolean,default: false,},/***  HLS點播流播放時使用：需已有對應清晰度的HLS流，供選擇的清晰度配置,*  如 "yh,fhd,hd,sd" (說明：*  yh:原始分辨率，*  fhd:超清，*  hd:高清，*  sd:標清,*  不配置則不啟用,*  需要提供多清晰度源，比如原畫源是test.m3u8, 則hd源即為test_hd.m3u8)*/resolution: {type: String,default: '',},/***  HLS點播流播放時使用：默認播放的清晰度*/resolutiondefault: {type: String,default: 'hd',},/***  HLS點播流播放時使用：倍速列表*/playbackRates: {type: Array,default: [0.5, 1, 2, 3],},/***  HLS點播流播放時使用：默認倍速*/playbackRate: {type: Number,default: 1,},/***  HTTP-FLV播放時使用: 是否有音頻，傳遞該屬性用于處理只有音頻或只有視頻的源, Boolean 默認不配置自動判斷*/hasaudio: {type: Boolean,},/***  HTTP-FLV播放時使用: 是否有視頻，傳遞該屬性用于處理只有音頻或只有視頻的源, Boolean 默認不配置自動判斷*/hasvideo: {type: Boolean,},/***  v2.5.1  自定義工具欄按鈕, 配置模板(按鈕名稱[:class名稱]), 多個用英文逗號分隔,*  示例：custom-buttons="對講,配置:vjs-icon-cog"*/customButtons: {type: String,default: '',},/***  v2.5.2  是否自動獲取焦點*/autofocus: {type: Boolean,default: false,},/***  v2.5.3  是否雙擊全屏*/dblclickFullscreen: {type: Boolean,default: true,},/***  v2.6.2  語言(zh-CN/en) 默認不配置自動判斷*/language: {type: String,},/***  v2.7.12  水印文字*/waterMark: {type: String,default: '',},/***  v2.7.29  電子放大*/digitalZoom: {type: Boolean,default: false,},},methods: {/////////////////////////////// 事件 ////////////////////////////////*** m3u8 加載失敗時觸發通知消息, 參數: { type: '', message: ''}*/handleMessage(obj) {this.$emit('message', obj);},/*** 播放器出錯回調, 參數: Error Object*/handleError(obj) {this.$emit('error', obj);},/*** 播放結束, 參數: 無*/handleEnded() {this.$emit('ended');},/*** 進度更新, 參數: 當前時間進度*/handleTimeupdate(obj) {this.$emit('timeupdate', obj);},/*** 暫停, 參數: 當前時間進度*/handlePause(obj) {this.$emit('pause', obj);},/*** 播放, 參數: 當前時間進度*/handlePlay(obj) {this.$emit('play', obj);},/*** 全屏狀態改變, 參數：true/false*/handleFullscreen(obj) {this.$emit('fullscreen', obj);},/*** 外部快照回調, 參數: 快照 Base64 數據*/handleSnapOutside(obj) {this.$emit('snapOutside', obj);},/*** 內部快照回調, 由控制欄快照按鈕觸發, 參數: 快照 Base64 數據*/handleSnapInside(obj) {this.$emit('snapInside', obj);},/*** v2.5.1 自定義按鈕點擊回調, 參數：名稱*/handleCustomButtons(obj) {this.$emit('customButtons', obj);},/*** v2.7.32 可播放, 參數：時長（秒）*/handleCanplay(obj) {this.$emit('canplay', obj);},/*** v2.7.32 音量改變回調, 參數：音量（0~1），靜音狀態*/handleVolumechange(obj) {this.$emit('volumechange', obj);},/////////////////////////////// 方法 ////////////////////////////////*** 播放*/play() {this.$refs.livePlayerRef.play();},/*** 暫停*/pause() {this.$refs.livePlayerRef.pause();},/*** 獲取暫停狀態*/paused() {this.$refs.livePlayerRef.paused();},/***  獲取當前播放時間進度, 同步返回播放時間進度數據*/getCurrentTime() {this.$refs.livePlayerRef.getCurrentTime();},/***  v2.2.5 設置當前播放時間進度, 即 seek*/setCurrentTime() {this.$refs.livePlayerRef.setCurrentTime();},/***  外部 API 方式獲取快照, 快照獲取成功后, 觸發 snapOutside Event*/snap() {this.$refs.livePlayerRef.snap();},/***  獲取靜音狀態*/getMuted() {this.$refs.livePlayerRef.getMuted();},/***  設置靜音狀態*/setMuted() {this.$refs.livePlayerRef.setMuted();},/***  v1.7.6 獲取全屏狀態*/isFullscreen() {this.$refs.livePlayerRef.isFullscreen();},/*** v1.7.6 觸發全屏, 需要放置到交互事件回調中調用*/requestFullscreen() {this.$refs.livePlayerRef.requestFullscreen();},/*** v2.1.9 退出全屏, 需要放置到交互事件回調中調用*/exitFullscreen() {this.$refs.livePlayerRef.exitFullscreen();},/*** v2.1.9 觸發全屏, 需要放置到交互事件回調中調用, 如果已處在全屏狀態, 則退出全屏*/toggleFullscreen() {this.$refs.livePlayerRef.toggleFullscreen();},/*** v1.7.7 獲取音量*/getVolume() {this.$refs.livePlayerRef.getVolume();},/*** v1.7.7 設置音量, 0~1*/setVolume(val) {this.$refs.livePlayerRef.setVolume(val);},/*** v2.7.10 獲取點播時長（秒）*/getDuration() {this.$refs.livePlayerRef.getDuration();},},
};
</script><style lang="scss" scoped></style>

• 使用組件

 <div style="width: 500px; height: 400px"><SDVideoPlayer :url="url"></SDVideoPlayer></div>

 url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8'