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>
<LivePlayer
ref="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'
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
