阿里播放器的使用Aliplayer

阿里播放器以及video标签两种使用方式

阿里在线配置

1. index.html添加代码

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

<template><div><div @contextmenu.prevent class="w"><div class="video_page"><div class="vedio_top"><div class="vedio_tit"><img@click="goBack"src="../../assets/img/video/icon_fanhui2.png"alt/><div>{{ vedioTitle }}</div></div></div><div class="vedio_body"><div class="prism-player" id="player-con"></div><!-- <videocontrolsautoplaymutedcontrolslist="nodownload":src="play_url"id="media":disablePictureInPicture="true":style="{ width: vedioWidth2 }"></video> --><div class="vedio_rt" :style="{ width: vedioWidth }"><!-- 收起按钮 --><div v-if="widthBtn" @click="changeVedioWidth(0)" class="toWidth"><imgstyle="transform: rotate(180deg)"src="../../assets/img/video/left.png"alt/><!-- <img src="../../assets/img/video/icon_shouqi.png" alt /> --></div><!-- 展开按钮 --><div v-else @click="changeVedioWidth(1)" class="toWidth toWidth2"><img src="../../assets/img/video/icon_shouqi.png" alt /></div><!-- tabs切换 --><div class="vedio_tabs"><div@click="changeTab(index)":class="{ tabActive: tabActive == index }"class="tabsList"v-for="(item, index) in tabsList":key="index">{{ item }}</div></div><!-- 目录列表 --><div v-if="tabActive == 0" class="kechengList"><el-tree:default-expand-all="true":data="menuList":props="{ label: 'subsection', children: 'section' }"@node-click="changeVedio":highlight-current="true"node-key="id":expand-on-click-node="false"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><!-- <span>{{ data.section }}</span> --><span v-if="data.section"><img src="../../assets/img/live/icon_2_.png" alt /></span><span v-else><img src="../../assets/img/live/icon_2_.png" alt /></span></span></el-tree></div><!-- 笔记 --><div v-if="tabActive == 1"><div class="biji_box"><div class="biji_top"><textareanameidplaceholder="请输入笔记内容"v-model="noteContent"></textarea><div v-if="widthBtn" class="biji_btn" @click="addNote">提交</div></div><div class="biji_list"><div class="biji_list_top"><div class="list_title">笔记</div></div><div class="none" v-if="noteList.length == 0">暂无笔记</div><div v-else class="biji_list_box2"><divclass="biji_list_body"v-for="(item, index) in noteList":key="index"><div class="biji_content">{{ item.contents }}</div><div class="biji_btm"><div class="btm_left">{{ item.create_at }}</div><div class="btm_right"><el-popconfirmtitle="确定删除该笔记？"@onConfirm="delNote(item.id)"><imgslot="reference"src="../../assets/img/course/cion_shanchu1.png"alt=""/></el-popconfirm></div></div></div></div></div></div></div></div></div></div></div></div>
</template><script>
import {videoDetail,videoUrl,vedioFinish,videoWatch,NoteList,addNote,delNote,
} from "../../assets/js/course.js";
export default {data() {return {player: {},old_id: 0,vedioTitle: "",id: "",play_url: "",// 视频右侧宽度vedioWidth: "27%",vedioWidth2: "73%",// vedioWidth2: "900px",widthBtn: true,pinglunNum: 3,edit: -1,del: -1,pre: false,next: false,bijiNum: 6,tabActive: 0,tabsList: ["目录", "笔记"],jie_active: 0,shiting_active: -1,jie_active2: -1,shiting_active2: -1,menuList: [],piangjiaList: [1, 2, 3, 4, 5, 6],c_id: "",c_s_id: "",// 笔记列表noteList: [],// 答疑列表dayiList: [],// 笔记内容noteContent: "",// 答疑内容dayiContent: "",video_id: "",culum_id: "",user_id: "",// 当前播放进度now_time: "",video_time: "",playTime: "",};},mounted() {this.old_id = this.$route.query.video_id;this.culum_id = this.$route.query.culum_id;this.video_id = this.$route.query.video_id;this.user_id = JSON.parse(window.localStorage.getItem("userInfo"))? JSON.parse(window.localStorage.getItem("userInfo")).id: "";this.getVedioList();// this.$nextTick(() => {// });// 监听视频播放结束// let myVideo = document.getElementById("media");// let that = this;// myVideo.addEventListener("ended", function () {//   vedioFinish({//     user_id: that.user_id,//     culum_id: that.culum_id,//     video_id: that.video_id,//   }).then((res) => {//     // console.log(res);//     if (res.code == 200) {//       that.$message.success("该视频已学完！");//       return;//     }//   });// });// 监听当前播放时间// myVideo.addEventListener("timeupdate", function () {//   that.now_time = myVideo.currentTime;// });},destroyed() {this.watchTime();},created() {// 屏蔽f12// window.onkeydown = window.onkeyup = window.onkeypress = function (event) {//   // 判断是否按下F12，F12键码为123//   if (event.keyCode == 123) {//     event.preventDefault(); // 阻止默认事件行为//     window.event.returnValue = false;//   }// };},methods: {// 初始化播放器init() {// console.log(this.play_url)this.player = new Aliplayer({id: "player-con",source: this.play_url,width: "100%",height: "100%",autoplay: true,isLive: false,rePlay: false,videoHeight: "100%",playsinline: true,preload: true,autoPlayDelayDisplayText: "加载中...",language: "zh-cn",controlBarVisibility: "hover",useH5Prism: true,skinLayout: [{name: "bigPlayButton",align: "blabs",x: 30,y: 80,},{name: "H5Loading",align: "cc",},{name: "errorDisplay",align: "tlabs",x: 0,y: 0,},{name: "infoDisplay",},{name: "tooltip",align: "blabs",x: 0,y: 56,},{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: "setting",align: "tr",x: 15,y: 12,},{name: "volume",align: "tr",x: 5,y: 10,},],},],}// function (player) {//   console.log("播放器创建成功");// });let that = this;this.player.on("ready", function (e) {// console.log(that.video_time);// 指定播放时间that.player.seek(that.video_time);});//  监听视频播放结束this.player.on("ended", () => {vedioFinish({user_id: that.user_id,culum_id: that.culum_id,video_id: that.video_id,}).then((res) => {// console.log(res);if (res.code == 200) {that.$message.success("该视频已学完！");return;}});});// 监听当前播放时间this.player.on("timeupdate", () => {this.getCurrentTime();});},getCurrentTime() {this.now_time = this.player.getCurrentTime();},// 记录当前播放进度watchTime() {videoWatch({user_id: this.user_id,video_id: this.old_id,setime: this.now_time,culum_id: this.culum_id,}).then((res) => {// console.log(res);});},// 获取视频地址getVideoUrl(video_id, type) {videoUrl({culum_id: this.culum_id,video_id: video_id,user_id: this.user_id,}).then((res1) => {// console.log(res1);if (res1.code == 200) {this.play_url = res1.data.v_url;this.video_time = res1.data.setime;this.init();this.old_id = video_id;if (type && type == 2) {this.$message.success("视频切换成功");}// let myVideo = document.getElementById("media");// myVideo.load();// myVideo.currentTime = res1.data.setime;// console.log(myVideo.currentTime);}});},// 获取视频信息getVedioList() {videoDetail({culum_id: this.culum_id,user_id: this.user_id,video_id: this.video_id,}).then((res) => {// console.log(res);if (res.code == 200) {this.vedioTitle = res.data.culum.alias_name;this.menuList = res.data.section;this.getVideoUrl(res.data.video_id);}});},// 切换视频changeVedio(data, Node) {if (Node.childNodes.length > 0) {return;}this.video_id = data.id;this.watchTime();// 先销毁之前的播放器 以免样式重叠this.player.dispose();this.getVideoUrl(data.id, 2);},// 添加笔记addNote() {if (!this.noteContent) {this.$message.error("请输入笔记内容！");return;}addNote({user_id: this.user_id,culum_id: this.culum_id,contents: this.noteContent,}).then((res) => {// console.log(res);if (res.code == 200) {this.$message.success("笔记添加成功");this.noteContent = "";this.getNote();}});},// 获取笔记列表getNote() {NoteList({user_id: this.user_id,culum_id: this.culum_id,}).then((res) => {// console.log(res);if (res.code == 200) {this.noteList = res.data;}});},// 删除笔记delNote(id) {delNote({id: id,}).then((res) => {// console.log(res);if (res.code == 200) {this.$message.success("删除成功");this.getNote();}});},// 展开与收起changeVedioWidth(i) {let myVideo = document.getElementById("media");if (i == 0) {this.vedioWidth = "1px";this.vedioWidth2 = "100%";// myVideo.width = 1000;this.widthBtn = !this.widthBtn;} else {this.vedioWidth = "27%";this.vedioWidth2 = "73%";// myVideo.width = 800;this.widthBtn = !this.widthBtn;}},changeTab(i) {this.tabActive = i;if (i == 2) {// this.getVedioBiji();} else {if (i == 1) {this.getNote();}}},goBack() {this.$router.go(-1);},},
};
</script><style lang="less" scoped>
.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 20px;
}
/deep/ .kechengList .el-tree {background-color: transparent;color: #999;
}
/deep/ .kechengList .el-tree-node__content {position: relative;height: 60px;font-size: 14px;border-bottom: 1px solid #555555;
}
/deep/ .kechengList .el-tree-node__content:hover {background-color: #121212;color: #0c6ae6 !important;
}
/deep/ .kechengList .el-tree-node:focus > .el-tree-node__content {background-color: #121212;color: #0c6ae6 !important;
}
/deep/.el-tree--highlight-current.el-tree-node.is-current> .el-tree-node__content {background-color: #121212;color: #0c6ae6 !important;
}
// 隐藏滚动条
.pingjia_body_list::-webkit-scrollbar,
.kechengList::-webkit-scrollbar,
.biji_list_box2::-webkit-scrollbar,
.dayi_box::-webkit-scrollbar {display: none;/* Chrome Safari */
}.pingjia_body_list,
.kechengList,
.biji_list_box2,
.dayi_box {scrollbar-width: none;/* firefox */-ms-overflow-style: none;/* IE 10+ */// overflow-x: hidden;overflow-y: auto;
}// 修改placeholder样式
@deep: ~">>>";input::-webkit-input-placeholder {color: #999;font-size: 14px;
}@deep: ~">>>";input::-moz-input-placeholder {color: #999;font-size: 14px;
}@deep: ~">>>";input::-ms-input-placeholder {color: #999;font-size: 14px;
}.kechengCurrent {color: #0c6ae6 !important;
}.tabCurrent {color: #0c6ae6;
}
.jie_active {color: #0c6ae6 !important;background-color: #121212;
}
.jie_active2 {color: #0c6ae6 !important;
}.shiting_active {color: #fff !important;background-color: #f13232;
}.jw-icon-barlogo-new {display: none !important;
}.jw-skin-bce .jw-button-color,
.jw-skin-bce .jw-text {display: none !important;
}.tabActive {background-color: #333333;//   height: 48px;border-top: 2px solid #525252;
}.w {// width: 1200px;// margin: 0 auto;.video_page {width: 100%;height: 100%;position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 6;}.vedio_top {width: 100%;height: 80px;display: flex;align-items: center;justify-content: space-between;background-color: #444;padding: 0 40px;box-sizing: border-box;}.vedio_tit {display: flex;align-items: center;font-size: 20px;color: #fff;// font-weight: 700;img {width: 20px;height: 20px;margin-right: 40px;cursor: pointer;}}.vedio_body {display: flex;justify-content: space-between;width: 100%;height: 880px;background-color: #333333;padding: 20px 0;padding-top: 0;box-sizing: border-box;// video {//   width: 75%;// }// padding-left: 50px;#playercontainer {// width: 800px;.jw-icon-barlogo-new {display: none !important;}}.vedio_rt {position: relative;transition: all linear 0.1s;// width: 516px;border-left: 2px solid rgba(0, 0, 0, 0.1);.toWidth {width: 32px;height: 40px;background: rgba(0, 0, 0, 1);opacity: 0.2;border-radius: 0px 20px 20px 0px;// text-align: center;line-height: 40px;position: absolute;top: 50%;left: 15px;transform: translate(-50%);z-index: 33;cursor: pointer;img {width: 10px;height: 18px;margin-left: 8px;margin-top: 10px;}}.toWidth2 {top: 45%;left: -33px;transform: rotate(180deg);background-color: #525252;}//   color: #fff;.vedio_tabs {display: flex;align-items: center;width: 100%;height: 50px;background-color: #525252;color: #fff;.tabsList {width: 172px;height: 48px;text-align: center;font-size: 20px;color: #fff;cursor: pointer;line-height: 48px;}}.kechengList {// height: 790px;height: calc(100vh - 130px);}.dayi_box {width: 100%;// height: 790px;padding: 30px;box-sizing: border-box;color: #999;font-size: 14px;overflow-y: auto;.dayi_list {padding: 10px 0;box-sizing: border-box;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.dayi_content {padding: 10px 0;box-sizing: border-box;}.dayi_btm {display: flex;align-items: center;justify-content: space-between;margin-top: 10px;.pinglun {display: flex;align-items: center;img {width: 18px;height: 15px;margin-right: 8px;}}}}textarea {width: 100%;background-color: #272727;color: #999;outline: none;resize: none;// width: 454px;height: 110px;border-radius: 6px;padding: 10px;box-sizing: border-box;}.biji_btn {position: absolute;right: 0;bottom: -50px;width: 80px;height: 40px;background: rgba(12, 106, 231, 1);border-radius: 20px;font-size: 14px;color: #fff;text-align: center;line-height: 40px;margin-top: 10px;// margin-left: 375px;cursor: pointer;}.biji_btn2 {height: 30px;line-height: 30px;margin-left: 0;}.tips {font-size: 8px;color: #fff;height: 20px;padding: 0 5px;box-sizing: border-box;background: rgba(101, 101, 101, 1);border: 1px solid rgba(204, 204, 204, 1);border-radius: 4px;text-align: center;}.tips1 {position: absolute;left: 0;bottom: -25px;// right: 5px;// top: 5px;}.biji_top {position: relative;// width: 454px;margin: 0 auto;}.biji_box {padding: 30px;box-sizing: border-box;// .biji_list::-webkit-scrollbar {//   display: none; /* Chrome Safari */// }// .biji_list {//   scrollbar-width: none; /* firefox *///   -ms-overflow-style: none; /* IE 10+ *///   overflow-x: hidden;//   overflow-y: auto;// }.biji_list {// width: 454px;// height: 570px;margin-top: 50px;color: #999;font-size: 14px;.none {font-size: 18px;text-align: center;margin-top: 100px;}.biji_list_top {color: #999;display: flex;align-items: center;justify-content: space-between;margin: 30px 0;.rrrow {width: 50px;position: relative;text-align: center;img {width: 9px;height: 12px;margin: 0 5px;cursor: pointer;}img:nth-child(2) {transform: rotate(180deg);}}}.biji_list_box2 {width: 100%;// height: 500px;height: calc(100vh - 400px);overflow-y: auto;}.biji_list_body {width: 100%;margin-bottom: 30px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);// opacity: 0.1;.biji_content,textarea {width: 100%;padding: 10px;box-sizing: border-box;background-color: #272727;border-radius: 6px;color: #999;margin-bottom: 15px;resize: none;outline: none;}.biji_btm {display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px;.btm_left {font-size: 12px;color: #999;}.btm_right {text-align: right;width: 80px;position: relative;img {width: 12px;height: 16px;cursor: pointer;}}}}.biji_list_body:last-child {border: none;}}}.list_title {margin-bottom: 20px;}.pingjia_box {padding: 30px;box-sizing: border-box;.biji_body {font-size: 14px;color: #999;.pingjia_body_list {height: 550px;}.pinglun_list {display: flex;padding: 30px 0;box-sizing: border-box;border-bottom: 1px solid rgba(255, 255, 255, 0.1);.linglun_list_left {img {width: 31px;height: 31px;border-radius: 50%;margin-right: 10px;}}.pinglun_list_right {width: 400px;.pinglun_desc {font-size: 16px;margin: 30px 0;}.pinglun_time {font-size: 12px;}}}.none {text-align: center;margin-top: 100px;img {width: 40px;height: 40px;margin-bottom: 10px;}}}}}}
}
</style>

阿里播放器的使用Aliplayer相关推荐

react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成
react项目中使用阿里播放器播放视频,包括切换视频,播放定时跳转(兼容ios和andro),播放完成 1.index.html引入阿里播放器的cdn <link rel="style ...
uniapp使用阿里播放器
阿里播放器需要引入js和css所以用了下面的方法,创建script,然后引入连接. 刚开始我是在页面的created中写的,但是会出现第一次的时候aliplayer没有创建成功,undefined,如 ...
阿里播放器踩坑记录进度条重构 video loadByUrl失效解决方案
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...
uniapp h5直播拉流的几种方法 flv.js， video.js，阿里播放器sdk，video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签前言首先引入资源文件需要创建index.html 模板文件 flv.js video.j ...
Android开发阿里播放器
最近在接阿里播放器,记录下:后面不断更新一.播放本地视频和网络视频: 本地视频:url = Environment.getExternalStorageDirectory().getPath()+& ...
流媒体服务器，red5，EsayDSS,AdobeMediaServer5和阿里推流服务性能对比。flash播放器JWplayer CKplayers Aliplayer性能对比
首先介绍一下流媒体服务器的主要功能. 流媒体是以流式协议(RTP/RTSP.MMS.RTMP等)将视频文件传输到客户端,供用户在线观看:也可从视频采集.压缩软件接收实时视频流,再以流式协议直播给客户端 ...
直播流播放，视频监控/直播监控。使用火山引擎VePlayer播放50+直播流保证流程运行。思路理解后类比腾讯TRTC和阿里播放器
大家感觉有用的话,麻烦点赞收藏一下.也是踩坑踩出来的. 目标:50个直播流同时渲染,保证视频流播放正常. 代码在最后面,重点是 1. 视频流为 m3u8格式.(如果服务端传递回flv地址,大家自己re ...
苹果CMSV10整合aliplayer播放器/带记忆播放
aliplayer 阿里播放器的记忆功能很给力,这篇整合教程加了阿里播放器的记忆功能,去除了弹幕,资源预加载等功能. 使用方法: 1.进入[后台],点击顶部到导航[视频],选择左边导航中的[播放器], ...
苹果CMS V10 整合阿里云播放器-带记忆播放
这篇整合教程加了阿里播放器的记忆功能,去除了弹幕,资源预加载等功能. 有人会说,我用ck .dp不好吗?为啥要用aliplayer,阿里播放器的记忆功能很给力,比如手机播放页面在后台放了很久,隔了几天 ...
阿里云SDK播放器集成
android阿里云基础视频播放器记录: 1.阿里云视频播放器sdk地址:https://help.aliyun.com/document_detail/61910.html?spm=a2c4g.11 ...

阿里播放器的使用Aliplayer

阿里播放器以及video标签两种使用方式

1. index.html添加代码

阿里播放器的使用Aliplayer相关推荐

最新文章

热门文章

阿里播放器的使用Aliplayer

阿里播放器 以及video标签两种使用方式

1. index.html添加代码

阿里播放器的使用Aliplayer相关推荐

最新文章

热门文章

阿里播放器以及video标签两种使用方式