integrated_traffic_uniapp/components/aliplay/VueAliplayer.vue

718 lines
22 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="prism-player" :id="playerId" :style="playStyle"></div>
</template>
<script>
export default {
name: "Aliplayer",
props: {
source: {
type: String,
default: ""
},
//媒体转码服务的媒体Id。
vid: {
type: String,
default: ""
},
//播放权证
playauth: {
type: String,
default: ""
},
//容器的大小
height: {
type: String,
default: "320px"
},
//容器的大小
width: {
type: String,
default: "100%"
},
//视频的高度大小
videoWidth: {
type: String,
default: "100%"
},
//视频的宽度大小
videoHeight: {
type: String,
default: "320px"
},
//播放器自动加载目前仅h5可用
preload: {
type: Boolean,
default: false
},
//播放器默认封面图片请填写正确的图片url地址。需要autoplay为false才生效
cover: {
type: String,
default: ""
},
//播放内容是否为直播,直播时会禁止用户拖动进度条。
isLive: {
type: Boolean,
default: false
},
//播放器是否自动播放在移动端autoplay属性会失效。
autoplay: {
type: Boolean,
default: false
},
//播放器自动循环播放。
rePlay: {
type: Boolean,
default: false
},
//指定使用H5播放器。
useH5Prism: {
type: Boolean,
default: false
},
//指定使用Flash播放器。
useFlashPrism: {
type: Boolean,
default: false
},
//H5是否内置播放有的Android浏览器不起作用。
playsinline: {
type: Boolean,
default: false
},
//显示播放时缓冲图标默认true。
showBuffer: {
type: Boolean,
default: true
},
//URL 皮肤图片,不建议随意修改该字段,如要修改,请参照皮肤定制。
skinRes: {
type: String,
default: ""
},
skinLayout: {
type: Array,
default: function () {
return []
}
},
//默认为hover。可选的值为clickhoveralways
controlBarVisibility: {
type: String,
default: "hover"
},
//控制栏自动隐藏时间ms
showBarTime: {
type: String,
default: ""
},
/***
* JSON串用于定制性接口参数目前支持
1.“fullTitle”“测试页面”
全屏时显示视频标题仅flash支持
2. “m3u8BufferLength”“30”
播放m3u8时加载缓存ts文件长度单位仅flash支持
3. “liveStartTime”“2016/08/17 12:00:00”
直播开始时间,用于提示直播未开始(仅flash支持)。
4. “liveOverTime”“2016/08/17 14:00:00”
直播结束时间用于提示直播结束仅flash支持
*/
extraInfo: {
type: String,
default: ""
},
/**
*是否允许系统右键菜单显示默认为false。
*/
enableSystemMenu: {
type: Boolean,
default: false
},
/***
*
*指定播放地址格式只有使用vid的播放方式时支持
可选值为mp4m3u8flvmp3默认为空仅H5支持。
* */
format: {
type: String,
default: "mp4"
},
/***
*
* 指定返回音频还是视频只有使用vid的播放方式时支持。
可选值为videoaudio默认为video
audio主要是针对只包含音频的视频格式比如音频的mp4仅H5支持。
* */
mediaType: {
type: String,
default: "video"
},
/***
* 指定排序方式只有使用vid + plauth播放方式时支持。
desc表示按倒序排序从大到小排序
asc表示按正序排序从小到大排序
默认值asc仅H5支持。
* */
qualitySort: {
type: String,
default: "asc"
},
/***
* 显示视频清晰度多个用逗号分隔比如FD,LD此值是vid对应流清晰度的一个子集
取值范围FD流畅LD标清SD高清HD超清OD原画2K2K4K4K仅H5支持。
* */
definition: {
type: String,
default: ""
},
/**
* 默认视频清晰度此值是vid对应流的一个清晰度
取值范围FD流畅LD标清SD高清HD超清OD原画2K2K4K4K仅H5支持。
* */
defaultDefinition: {
type: String,
default: ""
},
/**
* 声明启用同层H5播放器启用时设置的值为h5
* */
x5_type: {
type: String,
default: "h5"
},
/**
* 声明视频播放时是否进入到TBS的全屏模式默认为false。
当需要把视频做为背景时设置为true
* */
x5_fullscreen: {
type: Boolean,
default: false
},
/**
* 声明视频播在界面上的位置默认为“center”。
可选值为“top”“center”
* */
x5_video_position: {
type: String,
default: "center"
},
/**
* 声明 TBS 播放器支持的方向,可选值:
landscape:横屏)
portraint:竖屏
landscape
* */
x5_orientation: {
type: String,
default: "portraint"
},
/**
* 声明TBS全屏播放是否横屏默认值为true。
* */
x5LandscapeAsFullScreen: {
type: String,
default: "true"
},
/**
* 延迟播放时间,单位为秒。
* */
autoPlayDelay: {
type: Number,
default: 0
},
/**
* 延迟播放提示文本
* */
autoPlayDelayDisplayText: {
type: String,
default: "正在转码,请稍后......"
},
/**
* 国际化默认为zh-cn
如果未设置,则采用浏览器语言。
可选值为zh-cnen-us或其它值。
* */
language: {
type: String,
default: "zh-cn"
},
/**
* 自定义国际化文本json结构key的值需要和language属性值对应起来。
例子:{jp:{Play:”Play”}}
* */
languageTexts: {
type: Object,
default: function () {
return {}
}
},
/**
* flash启用截图功能
* */
snapshot: {
type: Boolean,
default: false
},
/**
* H5设置截图水印。
* */
snapshotWatermark: {
type: Object,
default: function () {
return {}
}
},
/**
* Safari浏览器可以启用Hls插件播放Safari 11除外。
* */
useHlsPluginForSafari: {
type: Boolean,
default: false
},
/**
* H5播放flv时设置是否启用播放缓存只在直播下起作用。
* */
enableStashBufferForFlv: {
type: Boolean,
default: false
},
/**
* H5播放flv时初始缓存大小只在直播下起作用。
* */
stashInitialSizeForFlv: {
type: Number,
default: 10
},
/**
* 缓冲多长时间后提示用户切换低清晰度默认20秒。
* */
loadDataTimeout: {
type: Number,
default: 20
},
/**
*最大缓冲超时时间超过这个时间会有错误提示默认60秒。
* */
waitingTimeout: {
type: Number,
default: 60
},
/**
* 直播开始时间直播时移功能使用格式为“2018/01/04 12:00:00”。
* */
liveStartTime: {
type: String,
default: ""
},
/**
* 直播结束时间直播时移功能使用格式为“2018/01/04 12:00:00”。
* */
liveOverTime: {
type: String,
default: ""
},
/**
* 直播可用时移查询地址,详情参见直播时移。
* https://help.aliyun.com/document_detail/65129.html?spm=a2c4g.11186623.2.28.3603bf80LR74sS
* */
liveTimeShiftUrl: {
type: String,
default: ""
},
/**
* flv直播和hls时移切换是重新创建播放器方法详情参见直播时移。
* https://help.aliyun.com/document_detail/65129.html?spm=a2c4g.11186623.2.28.3603bf80LR74sS
* */
recreatePlayer: {
type: Function,
default: function () {
}
},
/**
*是否显示检测按钮默认为true。
* */
diagnosisButtonVisible: {
type: Boolean,
default: true
},
/**
* 禁用进度条的Seek默认为false仅Flash支持。
* */
disableSeek: {
type: Boolean,
default: false
},
/**
* 加密类型播放点播私有加密视频时设置值为1默认值为0。
* */
encryptType: {
type: Number,
default: 0
},
/**
* 进度条打点内容数组,详情参见进度条打点。
* [
{offset:0,text:'阿里视频云端到云到端服务的重要一环'},
{offset:10,text:'除了支持点播和直播的基础播放功能外'},
{offset:20,text:'深度融合视频云业务'},
{offset:30,text:'为用户提供简单、快速、安全、稳定的视频播放服务'},
{offset:40,text:'安装播放器Demo进行体验'},
{offset:50,text:'开发人员请点击SDK下载'}
]
* https://yq.aliyun.com/articles/686043?spm=a2c4g.11186623.2.31.3603bf80LR74sS
* */
progressMarkers: {
type: Array,
default: function () {
return []
}
},
/**
* 点播失败重试次数默认3次
* */
vodRetry: {
type: Number,
default: 3
},
/**
* 直播播放失败重试次数默认5次
* */
liveRetry: {
type: Number,
default: 5
},
playStyle: {
type: String,
default: ""
},
aliplayerSdkPath: {
// Aliplayer 代码的路径
type: String,
default: "//g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"
},
},
data() {
return {
playerId: "aliplayer_" + Math.random().toString(36).substr(2),
scriptTagStatus: 0,
isReload: false,
instance: null
};
},
created() {
if (window.Aliplayer !== undefined) {
// 如果全局对象存在,说明编辑器代码已经初始化完成,直接加载编辑器
this.scriptTagStatus = 2;
this.initAliplayer();
} else {
// 如果全局对象不存在,说明编辑器代码还没有加载完成,需要加载编辑器代码
this.insertScriptTag();
}
},
mounted() {
if (window.Aliplayer !== undefined) {
// 如果全局对象存在,说明编辑器代码已经初始化完成,直接加载编辑器
this.scriptTagStatus = 2;
this.initAliplayer();
} else {
// 如果全局对象不存在,说明编辑器代码还没有加载完成,需要加载编辑器代码
this.insertScriptTag();
}
},
methods: {
insertScriptTag() {
const _this = this;
let playerScriptTag = document.getElementById("playerScriptTag");
// 如果这个tag不存在则生成相关代码tag以加载代码
if (playerScriptTag === null) {
playerScriptTag = document.createElement("script");
playerScriptTag.type = "text/javascript";
playerScriptTag.src = this.aliplayerSdkPath;
playerScriptTag.id = "playerScriptTag";
let s = document.getElementsByTagName("head")[0];
s.appendChild(playerScriptTag);
}
if (playerScriptTag.loaded) {
_this.scriptTagStatus++;
} else {
playerScriptTag.addEventListener("load", () => {
_this.scriptTagStatus++;
playerScriptTag.loaded = true;
_this.initAliplayer();
});
}
_this.initAliplayer();
},
initAliplayer() {
const _this = this;
// scriptTagStatus 为 2 的时候,说明两个必需引入的 js 文件都已经被引入,且加载完成
if (
_this.scriptTagStatus === 2 &&
(_this.instance === null || _this.reloadPlayer)
) {
_this.instance && _this.instance.dispose();
document.querySelector("#" + _this.playerId).innerHTML = "";
// Vue 异步执行 DOM 更新,这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
// 所以,我们只能在 nextTick 里面初始化 Aliplayer
_this.$nextTick(() => {
_this.instance = window.Aliplayer({
id: _this.playerId,
source: _this.source,
vid: _this.vid,
playauth: _this.playauth,
width: _this.width,
height: _this.height,
videoWidth: _this.videoWidth,
videoHeight: _this.videoHeight,
preload: _this.preload,
cover: _this.cover,
isLive: _this.isLive,
autoplay: _this.autoplay,
rePlay: _this.rePlay,
useH5Prism: _this.useH5Prism,
useFlashPrism: _this.useFlashPrism,
playsinline: _this.playsinline,
showBuffer: _this.showBuffer,
skinRes: _this.skinRes,
skinLayout: _this.skinLayout,
controlBarVisibility: _this.controlBarVisibility,
showBarTime: _this.showBarTime,
extraInfo: _this.extraInfo,
enableSystemMenu: _this.enableSystemMenu,
format: _this.format,
mediaType: _this.mediaType,
qualitySort: _this.qualitySort,
definition: _this.definition,
defaultDefinition: _this.defaultDefinition,
x5_type: _this.x5_type,
x5_fullscreen: _this.x5_fullscreen,
x5_video_position: _this.x5_video_position,
x5_orientation: _this.x5_orientation,
x5LandscapeAsFullScreen: _this.x5LandscapeAsFullScreen,
autoPlayDelay: _this.autoPlayDelay,
autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText,
language: _this.language,
languageTexts: _this.languageTexts,
snapshot: _this.snapshot,
snapshotWatermark: _this.snapshotWatermark,
useHlsPluginForSafari: _this.useHlsPluginForSafari,
enableStashBufferForFlv: _this.enableStashBufferForFlv,
stashInitialSizeForFlv: _this.stashInitialSizeForFlv,
loadDataTimeout: _this.loadDataTimeout,
waitingTimeout: _this.waitingTimeout,
liveStartTime: _this.liveStartTime,
liveTimeShiftUrl: _this.liveTimeShiftUrl,
liveShiftSource: _this.liveShiftSource,
recreatePlayer: _this.recreatePlayer,
diagnosisButtonVisible: _this.diagnosisButtonVisible,
disableSeek: _this.disableSeek,
encryptType: _this.encryptType,
progressMarkers: _this.progressMarkers,
vodRetry: _this.vodRetry,
liveRetry: _this.liveRetry,
});
// 绑定事件,当 AliPlayer 初始化完成后,将编辑器实例通过自定义的 ready 事件交出去
_this.instance.on("ready", () => {
this.$emit("ready", _this.instance);
});
_this.instance.on("play", () => {
this.$emit("play", _this.instance);
});
_this.instance.on("pause", () => {
this.$emit("pause", _this.instance);
});
_this.instance.on("ended", () => {
this.$emit("ended", _this.instance);
});
_this.instance.on("liveStreamStop", () => {
this.$emit("liveStreamStop", _this.instance);
});
_this.instance.on("m3u8Retry", () => {
this.$emit("m3u8Retry", _this.instance);
});
_this.instance.on("hideBar", () => {
this.$emit("hideBar", _this.instance);
});
_this.instance.on("waiting", () => {
this.$emit("waiting", _this.instance);
});
_this.instance.on("snapshoted", () => {
this.$emit("snapshoted", _this.instance);
});
_this.instance.on("timeupdate", () => {
this.$emit("timeupdate", _this.instance);
});
_this.instance.on("requestFullScreen", () => {
this.$emit("requestFullScreen", _this.instance);
});
_this.instance.on("cancelFullScreen", () => {
this.$emit("cancelFullScreen", _this.instance);
});
_this.instance.on("error", () => {
this.$emit("error", _this.instance);
});
_this.instance.on("startSeek", () => {
this.$emit("startSeek", _this.instance);
});
_this.instance.on("completeSeek", () => {
this.$emit("completeSeek", _this.instance);
});
});
}
},
/**
* 播放视频
*/
play: function () {
this.instance.play();
},
/**
* 暂停视频
*/
pause: function () {
this.instance.pause();
},
/**
* 重播视频
*/
replay: function () {
this.instance.replay();
},
/**
* 跳转到某个时刻进行播放
* @argument time 的单位为秒
*/
seek: function (time) {
this.instance.seek(time);
},
/**
* 获取当前时间 单位秒
*/
getCurrentTime: function () {
return this.instance.getCurrentTime();
},
/**
*获取视频总时长,返回的单位为秒
* @returns 返回的单位为秒
*/
getDuration: function () {
return this.instance.getDuration();
},
/**
获取当前的音量返回值为0-1的实数ios和部分android会失效
*/
getVolume: function () {
return this.instance.getVolume();
},
/**
设置音量vol为0-1的实数ios和部分android会失效
*/
setVolume: function (vol) {
this.instance.setVolume(vol);
},
/**
*直接播放视频urltime为可选值单位秒目前只支持同种格式mp4/flv/m3u8之间切换暂不支持直播rtmp流切换
*@argument url 视频地址
*@argument time 跳转到多少秒
*/
loadByUrl: function (url, time) {
this.instance.loadByUrl(url, time);
},
/**
* 设置播放速度
*@argument speed 速度
*/
setSpeed: function (speed) {
this.instance.setSpeed(speed);
},
/**
* 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297
*@argument w 播放器宽度
*@argument h 播放器高度
*/
setPlayerSize: function (w, h) {
this.instance.setPlayerSize(w, h);
},
/**
*目前只支持H5播放器。
暂不支持不同格式视频间的之间切换。
暂不支持直播rtmp流切换。
*/
replayByVidAndPlayAuth: function (vid, accId, accSecret, stsToken, authInfo, domainRegion) {
this.instance.replayByVidAndPlayAuth(vid, accId, accSecret, stsToken, authInfo, domainRegion);
},
/***
* 重新设置vid和权限目前只支持H5播放器。
暂不支持不同格式视频间的之间切换。
暂不支持直播rtmp流切换。
* @param vid 视频ID
* @param playauth 播放权限
*/
replayByVidAndAuthInfo: function (vid, playauth) {
this.instance.replayByVidAndAuthInfo(vid, playauth);
},
/**
* 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8之间切换,暂不支持直播rtmp流切换
*@argument vid 视频id
*@argument playauth 播放凭证
*/
reloaduserPlayInfoAndVidRequestMts: function (vid, playauth) {
this.instance.reloaduserPlayInfoAndVidRequestMts(vid, playauth);
},
/***
*设置截图参数
* @param width 宽度
* @param height 高度
* @param rate 截图质量
*/
setSanpshotProperties: function (width, height, rate) {
this.instance.setSanpshotProperties(width, height, rate);
},
/**
* 设置封面地址
* @param cover 封面地址
*/
setCover: function (cover) {
this.instance.setCover(cover);
},
reloadPlayer: function () {
this.isReload = true;
this.initAliplayer();
this.isReload = false;
}
}
};
</script>
<style>
@import url(//g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css);
</style>