vue2 使用liveplayer加载视频

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'