VUE2中使用阿里云播放器AliPlayer

简述

基于 Vue 的播放器单页应用, 利用 web 播放器 sdk 进行视频点播，包含播放列表、字幕、多语言、自适应码率，皮肤自定义等功能 Web播放器文档

已知问题

• vue中使用截图，不太好使【已自行优化】
• 无键盘快捷键，无法通过空格暂停播放【已自行优化】
• 无法双击全屏【已自行优化】
• 没有提供直接更改主题色的方式，但自己可以通过CSS更改（莫得必要）【已自行优化】

前情提示

系统：

一说

• 部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤
• 带有#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行
• 如果无法下载、无法复制，请评论后留言即可。收到消息后会第一时间回复～
• 知识付费，1对1技术支持：开放技术支持 | 需求墙 · 语雀

有账号的朋友，可以点个赞或者评论两句哦，评论后会获得积分奖励～

官网文档：Web播放器快速接入_视频点播-阿里云帮助中心

其他

解决思路：直接iframe等方式内嵌HTML写法的播放器即可。

示例代码

修改皮肤

Web播放器SDK的进阶功能_视频点播-阿里云帮助中心

    .prism-player .prism-liveshift-progress .prism-progress-played, .prism-player .prism-progress .prism-progress-played {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background-color: #f00;
    }

额外

https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/H5VodVueDemo/README.zh_CN.md