阿里云播放器 web端问题解决总结

最新推荐文章于 2024-09-14 22:18:26 发布

人工智能时代

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量205

点赞数 9

分类专栏：阿里云播放器 web前端文章标签：前端阿里云播放器

本文链接：https://blog.csdn.net/yyhjifeng/article/details/141022193

版权

web前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

阿里云播放器

1 篇文章 0 订阅

订阅专栏

1：ios设备长按视频，会出现系统的放大镜效果：

可以只监听touchstart事件即可

var playerContainer = document.getElementById(this.playerId);
playerContainer.addEventListener('touchstart', preventZoom, { passive: false });
playerContainer.addEventListener('touchmove', preventZoom, { passive: false });

function preventZoom(e) {
   e.preventDefault();
}

2：集成时候vscode 的eslint会报错

this.player = new Aliplayer(props);

因为集成js，这个对象找不到，需要在.eslintrc.js 配置文件的globals 添加Aliplayer即可，作为全局可用的变量。

3：在安卓端，会出现默认的视频封面图

解决方案：设置一个空白base64编码图片

transparentPng: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABG2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+l1vpCgAAAAFzUkdCAK7OHOkAAAALSURBVAgdY2AAAgAABQABjbub8wAAAABJRU5ErkJggg==',

extraInfo: {
      // 视频封面图,设置一个空白base64编码图片，解决android出现默认封面图的问题
     poster: this.transparentPng, 
},