aliplayer播放器使用

项目背景：vue-cli3.0，使用播放地址方式播放

1、aliplayer官网地址：(https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1099.33ee1bc7e0ebmi)

2、使用方式

index.html文件中引入所需文件

<linkrel="stylesheet"href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"
/>
<scriptcharset="utf-8"type="text/javascript"src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"
></script>

3、页面结构:

<divv-if="hasvideo"id="player-con"style="height: 100%"
/>

4、js代码：

hastask：[{name: "bigPlayButton", align: "cc"},{name: "H5Loading", align: "cc"},{name: "errorDisplay", align: "tlabs", x: 0, y: 0},{name: "infoDisplay"},{name:"tooltip", align:"blabs",x: 0, y: 56},{name: "thumbnail"},{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: 12},{name:"subtitle", align:"tr",x:15, y:12},{name:"setting", align:"tr",x:15, y:12},{name: "volume", align: "tr", x: 5, y: 10}]}
],
// 参数说明： type类型：音频（'2'）视频（'1'）,seekTime(上次播放时间), iscomplate('本次播放视频是否看完')
getaliPlay(courseUrl,type ,seekTime, iscomplate) {let hastask = [];let contTime = seekTime;if (!contTime) {contTime = 0;}// 设置播放器高度$('#player-con').height('100%');// 初始化播放器时需判断页面中是否已存在播放器，如果存在就先remove掉后再重新创建if ($('#J_prismPlayer').length > 0) {this.player.dispose();$('#J_prismPlayer').remove();}const boarddiv = '<div id="J_prismPlayer"></div>';$('#player-con').append(boarddiv);$('#J_prismPlayer').height('100%');       this.player = new Aliplayer({id: 'J_prismPlayer',source: courseUrl, // 播放地址width: '100%',height: '500px',// seek: contTime,cover: '', // 播放器封面/* To set an album art, you must set 'autoplay' and 'preload' to 'false' */autoplay: true, // 是否自动播放preload: false,isLive: false,useH5Prism: true, // 使用h5播放器skinLayout: hastask, // 重置播放器UI样式x5_type: 'h5',});this.player.on('error', () => {this.clearTimeing();});this.player.on('ready', () => {contTime = contTime >= Math.round(this.player.getDuration())? '0': contTime;if (this.$route.query.taskId && !iscomplate) {let video = null;if(type === '2'){video = document.querySelector('audio');$('audio').addClass('pox');}else if(type === '1'){video = document.querySelector('video');$('video').addClass('pox');}video.currentTime = contTime;let supposedCurrentTime = 0;let maxtime = contTime;// 监听当前的播放位置发送改变时触发。video.addEventListener('timeupdate', () => {if (video.currentTime && video. > maxtime) {maxtime = video.currentTime;}// seeking属性：显示用户是否在视频中寻址（用户在视频、音频中移动跳跃到新的位置）if (!video.seeking) {supposedCurrentTime = video.currentTime;}});// prevent user from seekingvideo.addEventListener('seeking', () => {if (maxtime < video.currentTime) {video.currentTime = supposedCurrentTime - 3.3;}});}else {if(type === '2' && $('audio').hasClass('pox')){$('audio').romoveClass('pox');}else if(type === '1' && $('video').hasClass('pox')){$('video').removeClass('pox');}}this.player.seek(contTime);});this.player.on("play", () => {this.timing();this.videoplay = true;});this.player.on('pause', () => {this.videoplay = false;this.saveLearningParams.courseId = localStorage.getItem('courseId',);this.saveLearningLog();this.clearTimeing();});// this.player.on('requestFullScreen', () => {// })this.player.on('ended', () => {// 保存记录this.saveLearningLog();this.clearTimeing();for(let i = 0; i< this.allresouce.length; i++) {if(this.currentvideo.detailId === this.allresouce[i].detailId){this.nextvideo = this.allresouce[i+1];}}if(this.nextvideo.detailType === '1'){if(this.nextvideo.studyProcess){this.continueTime = this.nextvideo.studyProcess.learningLength;this.iscomplate = this.nextvideo.studyProcess.process === 100 ? true : false;}this.showvideo(this.nextvideo, this.continueTime, this.iscomplate, 'auto')};});// });
},

aliplayer播放器使用相关推荐

React+阿里云Aliplayer播放器实现rtmp直播（推流时间差，重启播放器，计时观看）
需求前端框架为React 用阿里云播放器Aliplayer播放直播使用的rtmp协议资料阿里云播放器 Web端文档:https://help.aliyun.com/document_detai ...
苹果CMSV10整合aliplayer播放器/带记忆播放
aliplayer 阿里播放器的记忆功能很给力,这篇整合教程加了阿里播放器的记忆功能,去除了弹幕,资源预加载等功能. 使用方法: 1.进入[后台],点击顶部到导航[视频],选择左边导航中的[播放器], ...
Aliplayer 播放器的使用（支持直播，点播、录播，视频播放等功能）
最近公司需要写一个简单的直播H5,作为前端播放器第一选择当然是video.js了.可是样式是在无法忍受,而且有些交互也不太友好.无奈继续寻找更加合适的播放器,阿里的Aliplayer 便是一个不错的选 ...
阿里视频云web播放器常见问题汇总
1. 如何正确选择播放器 Aliplayer播放器包含H5.Flash.自适应播放器,建议用户选择自适应播放器,可以根据终端类型.浏览器类型和地址协议选择最合适的播放器. 如果是加密播放只能选择Fla ...
阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
阿里云Aliplayer视频播放（web播放器）
1.官方文档https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV 2 ...
直播商城系统源码，播放器aliPlayer自定义清晰度切换
直播商城系统源码,播放器aliPlayer自定义清晰度切换 <!DOCTYPE html> <html><head><meta charset="u ...
使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流
一.使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流官方教程:https://help.aliyun.com/document_detail/125570.htm?spm= ...
react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成
react项目中使用阿里播放器播放视频,包括切换视频,播放定时跳转(兼容ios和andro),播放完成 1.index.html引入阿里播放器的cdn <link rel="style ...
nuxt3 阿里云直播播放器以及webSocket聊天室
 <template><div class="AsWhole"><p class="MattP3s ...

aliplayer播放器使用

aliplayer播放器使用相关推荐

最新文章

热门文章