VUE2中使用阿里云播放器AliPlayer |
您所在的位置：网站首页 › 播放器player在云点播台支持什么方式 › VUE2中使用阿里云播放器AliPlayer |
|
VUE2中使用阿里云播放器AliPlayer
原创
BeginMind 2023-11-28 12:18:48 博主文章分类：Vue ©著作权 文章标签 vue 播放器 videojs aliplayer 文章分类 Java 后端开发 yyds干货盘点 ©著作权归作者所有：来自51CTO博客作者BeginMind的原创作品，请联系作者获取转载授权，否则将追究法律责任 简述基于 Vue 的播放器单页应用, 利用 web 播放器 sdk 进行视频点播，包含播放列表、字幕、多语言、自适应码率，皮肤自定义等功能 Web播放器文档 前情提示系统： 一说 部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤ 带有#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行 如果无法下载、无法复制，请评论后留言即可。收到消息后会第一时间回复～知识付费，1对1技术支持：https://www.yuque.com/janeyork/blog/qorzdcrp4gbxy82w?singleDoc#有账号的朋友，可以点个赞或者评论两句哦，评论后会获得积分奖励～ 官网文档：https://help.aliyun.com/zh/vod/developer-reference/integration?userCode=pqofinu5&type=copy 已知问题vue中使用截图，不太好使无键盘快捷键，无法通过空格暂停播放无法双击全屏没有提供直接更改主题色的方式，但自己可以通过CSS更改（莫得必要）解决思路：直接iframe等方式内嵌HTML写法的播放器即可。 示例代码 MP4录播 import { tableMixin } from '@/store/table-mixin' import {videoList} from './js/testVideoList' export default { name: 'Qrcode', components: { }, mixins: [tableMixin], data () { return { videoList: videoList, player: null, playingVideo: {}, loadingColor: ['#276cb3', '#f2ac1a', '#28130e', '#229849', '#db2344'], videoLoading: true, fullScreen: false, qrcode: 'httE5%BA%A6%E7%83%AD%E6%90%9C', src2: 'https/u/3456749', bgSrc2: 'https/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', bgSrc: 'htt64b668c4c283.jpeg', } }, filters: { }, created () { console.log('created') }, mounted () { console.log('mounted') this.createDemoPlayer(this.videoList[0].source, this.videoList[0].CoverURL) this.playingVideo = videoList[0] this.videoLoading = false }, computed: { }, watch: { }, methods: { playVideo(video) { if (this.player === null || this.playingVideo.VideoId === video.VideoId) { return } this.player.loadByUrl(video.source) this.playingVideo = video }, createDemoPlayer(source, cover) { if (document.getElementById('player-con') === null) { const playerDomWrap = this.$refs.playerTemp const playerDom = document.createElement('div') playerDom.setAttribute('id', 'player-con') playerDomWrap.appendChild(playerDom) } const props = { id: 'player-con', width: '100%', height: '485px', language: 'zh-cn', source: source, isLive: false, cover: cover, 'autoplay': false, 'rePlay': false, 'playsinline': true, 'preload': true, components: [{ name: 'StartADComponent', type: AliPlayerComponent.StartADComponent, args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://promotion.aliyun.com/ntms/act/videoai.html', 3] }, { name: 'PauseADComponent', type: AliPlayerComponent.PauseADComponent, args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://promotion.aliyun.com/ntms/act/videoai.html'] }], 'skinLayout': [ { '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 }, { 'name': 'snapshot', 'align': 'tr', 'x': 10, 'y': 12 } ] } ] } // this.player = new Aliplayer(props) // this.player.on('requestFullScreen', this.fullScreenHandle) // this.player.on('cancelFullScreen', this.cancelFullScreenHandel) this.player = new Aliplayer(props, (player) => { console.log('播放器初始化完成', player) // 添加截图事件监听器 player.on('snapshoted', (data) => { console.log('截图完成', data) this.handleSnapshot(data) }) }) // this.player.on('snapshoted', (data) => { // console.log('截图完成', data) // var pictureData = data.paramData.base64 // var downloadElement = document.createElement('a') // downloadElement.setAttribute('href', pictureData) // var fileName = 'Aliplayer' + Date.now() + '.png' // downloadElement.setAttribute('download', fileName) // downloadElement.click() // pictureData = null // }) }, playNextVideo() { const videoList = this.videoList const index = videoList.findIndex(item => item.VideoId === this.playingVideo.VideoId) if (index === -1 || index === videoList.length - 1) { // this.player.getComponent('playerTipComponent').fadeOutTip() return } this.playVideo(videoList[index + 1]) }, fullScreenHandle() { const title = this.playingVideo.Title this.player.getComponent('playerFullScreenTitle').fullScreenHandle(title) this.fullScreen = true }, cancelFullScreenHandel() { // this.player.getComponent('playerFullScreenTitle').cancelFullScreenHandle() this.fullScreen = false }, handleSnapshot(data) { // 处理截图数据，可以将数据保存到组件的变量中 console.log('截图完成', data) var pictureData = data.paramData.base64 var downloadElement = document.createElement('a') downloadElement.setAttribute('href', pictureData) var fileName = 'Aliplayer' + Date.now() + '.png' downloadElement.setAttribute('download', fileName) downloadElement.click() pictureData = null // 执行其他操作... }, test(dataUrl,id){ console.log(dataUrl, id) } } } #player-container-id { width: 80%; max-width: 100%; height: 500px; //height: 0; //padding-top: 56.25%; } /deep/ #wrap { width: 80%; margin: 0 auto; } /deep/ .vjs-poster { width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; } /deep/ .adTextNode { background: rgba(255, 255, 255, 0.2); width: 44px; height: 23px; margin: 5px; display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 12px; } /deep/ .adCloseIconNode { width: 14px; height: 14px; display: inline-block; margin-left: 10px; background-image: url(/img/tmp/icon-close.png); background-size: cover; cursor: pointer; margin: 6px; } @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) { .tcp-logo-img { width: 50%; } } @media screen and (max-width: 480px) { #player-container-id { width: 100%; height: 240px; } } .tcplayer { margin: 0 auto; } @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) { .tcp-logo-img { width: 50%; } } @media screen and (max-width: 480px) { #player-container-id { width: 100%; height: 240px; } } 额外https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/H5VodVueDemo/README.zh_CN.md 赞 收藏 评论 分享 举报上一篇：WebStorm中报错Switch language version to React JSX解决 下一篇：【PUSDN】java中easyexcel导入导出带有图片的Excel（main方法方式） |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |