100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue阿里云点播播放器

vue阿里云点播播放器

时间:2019-10-02 09:02:09

相关推荐

vue阿里云点播播放器

1、在项目的components的文件夹下新建AliPlayer.vue文件,将sdk插件的代码放入其中,代码如下:

<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: "460px"},//容器的大小width: {type: String,default: "100%"},//视频的高度大小videoWidth: {type: String,default: "100%"},//视频的宽度大小videoHeight: {type: String,default: "460px"},//播放器自动加载,目前仅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 [{"name": "bigPlayButton","align": "cc","x": 30,"y": 80},{"name": "errorDisplay","align": "tlabs","x": 0,"y": 0},{"name": "infoDisplay"},{"name": "controlBar","align": "blabs","x": 0,"y": 0,"children": [{name: "progress", align: "blabs", x: 0, y: 44}, //播放进度条{name: "playButton", align: "tl", x: 15, y: 12},//播放开始暂停按钮{name: "timeDisplay", align: "tl", x: 10, y: 7},//播放视频时间{"name": "fullScreenButton",//全屏按钮"align": "tr","x": 10,"y": 10},{"name": "volume", //音量"align": "tr","x": 5,"y": 10}]}]}},//默认为‘hover’。可选的值为:‘click’、‘hover’、‘always’。controlBarVisibility: {type: String,default: "hover"},//控制栏自动隐藏时间(ms)showBarTime: {type: String,default: ""},/**** JSON串用于定制性接口参数,目前支持:1.“fullTitle”:“测试页面”全屏时显示视频标题(仅flash支持)。2. “m3u8BufferLength”:“30”播放m3u8时加载缓存ts文件长度单位(秒)(仅flash支持)。3. “liveStartTime”:“/08/17 12:00:00”直播开始时间,用于提示直播未开始(仅flash支持)。4. “liveOverTime”:“/08/17 14:00:00”直播结束时间,用于提示直播结束(仅flash支持)。*/extraInfo: {type: String,default: ""},/***是否允许系统右键菜单显示,默认为false。*/enableSystemMenu: {type: Boolean,default: false},/*****指定播放地址格式,只有使用vid的播放方式时支持可选值为’mp4’、’m3u8’、’flv’、’mp3’,默认为空,仅H5支持。* */format: {type: String,default: "m3u8"},/***** 指定返回音频还是视频,只有使用vid的播放方式时支持。可选值为’video’和’audio’,默认为’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(原画)2K(2K)4K(4K),仅H5支持。* */definition: {type: String,default: ""},/*** 默认视频清晰度,此值是vid对应流的一个清晰度,取值范围:FD(流畅)LD(标清)SD(高清)HD(超清)OD(原画)2K(2K)4K(4K),仅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-cn’、‘en-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},/*** 直播开始时间,直播时移功能使用,格式为:“/01/04 12:00:00”。* */liveStartTime: {type: String,default: ""},/*** 直播结束时间,直播时移功能使用,格式为:“/01/04 12:00:00”。* */liveOverTime: {type: String,default: ""},/*** 直播可用时移查询地址,详情参见直播时移。* /document_detail/65129.html?spm=a2c4g.11186623.2.28.3603bf80LR74sS* */liveTimeShiftUrl: {type: String,default: ""},/*** flv直播和hls时移切换是,重新创建播放器方法,详情参见直播时移。* /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下载'}]* /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: "/de/prismplayer/2.9.3/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);});let start = true;let startProgress = 0;let endProgress = 0;//禁止拖动进度条_this.instance.on("startSeek", (e) => {if (start) {start = false;startProgress = _this.instance.getCurrentTime();}_this.instance.pause();// this.$emit("startSeek", _this.instance);});//禁止拖动进度条_this.instance.on("completeSeek", () => {start = true;endProgress = _this.instance.getCurrentTime();if (endProgress < startProgress) {_this.instance.seek(endProgress);} else {_this.instance.seek(startProgress);}_this.instance.play();// 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);},/***直接播放视频url,time为可选值(单位秒)目前只支持同种格式(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(/de/prismplayer/2.9.3/skins/default/aliplayer-min.css);</style>

2、在所需页面中引入并使用,代码如下:

<template><div><!--阿里云播放器--><ali-player :encryptType="1":vid="vid":playauth="playAuth"ref="player":useFlashPrism="false":autoplay="true":isLive="false":showBuffer="true":cover="cover":showBarTime="true":disableSeek="true"showBarTime="500"width="800px"controlBarVisibility="always"></ali-player></div></template><script>import VueAliplayer from "../../components/AliPlayer";export default {components: {"ali-player": VueAliplayer},data() {return {cover: '', //视频封面vid: '', //视频vidplayAuth: '' //鉴权地址}},created() {this.getVideoData()},methods: {getVideoData(){//1、调用后台接口获取视频vid,playAuth(鉴权地址),cover(视频封面)的逻辑// 2、将对应的值分别赋值}}}</script><style scoped></style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。