1. 如何正确选择播放器

Aliplayer播放器包含H5、Flash、自适应播放器,建议用户选择自适应播放器,可以根据终端类型、浏览器类型和地址协议选择最合适的播放器。

如果是加密播放只能选择Flash播放器,H5现在还不支持加密播放。

参考在线配置

如何手工启用H5播放器

手工启用H5播放器有两种方式:

直接引用H5播放器的js文件

使用自适应播放器,然后设置useH5Prism属性为true

如何手工启用Flash播放器

手工启用Flash播放器有两种方式:

直接引用Flash播放器的js文件

使用自适应播放器,然后设置useFlashPrism属性为true

自适应播放器

根据终端类型、浏览器类型、设置的属性和地址协议选择最合适的播放器,适配的基本原则是:

H5优先级最高,能H5播放的绝不选择Flash,除非用户指定用Flash播放

  • useFlashPrism = true、rtmp和http-flv协议时,采用flash播放
  • 移动端采用H5播放
  • useH5Prism = true,采用H5播放
  • PC端MP4采用H5播放
  • PC端如果浏览器或通过Aliplayer的插件支持播放m3u8,则采用H5播放,否则采用Flash播放
  • 其它都用H5播放

2. 哪些浏览器支持flash

播放应该都支持flash播放, 但是最新的一些浏览器会禁用flash,需要手工启用, 参考下面的链接:

IE使用说明
Firefox使用说明
Chrome使用说明

3. flash播放器对mp4/flv无法拖拽

mp4与flv拖拽需要cdn添加支持,是通过播放器发送带时间的请求到cdn,cdn返回该时间段的视频数据。如果要实现拖拽,需要以下两个条件:

  • 文件索引信息需要在视频的头部,mp4包含视频时间戳等索引信息,以及flv的meta信息要在视频最前面,播放器解析到视频索引信息后,才可以依据拖拽的位置通过索引信息拿到指定位置的数据点,去向cdn发送请求;
  • cdn支持带时间/byte range的请求,需要在cdn控制台开启,如果在控制台开启,请参考

4. 解决Andorid微信上自动弹出全屏播放

Android手机在微信和QQ浏览器里自动全屏播放,这是腾讯浏览器的内置行为,不能修改,原因是由于腾讯浏览器挟持了video标签,由腾讯内置的播放器播放视频,但可以启用同层播放功能,可以解决视频覆盖Dom元素的问题如何启用H5的同层播放

5. 在微信里如何自动播放

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {wx.config({// 配置信息, 即使不正确也能使用 wx.readydebug: false,appId: '',timestamp: 1,nonceStr: '',signature: '',jsApiList: []});wx.ready(function() {var video=$(player.el()).find('video')[0];video.play();});};// 解决ios不自动播放的问题autoPlay();
</script>

6. 播放器如何初始播放位置

H5播放器:

var seeked = false;
player.on('canplaythrough',function  (e) {if(!seeked){seeked = true;player.seek(100);}
});

Flash 播放器:

var seeked = false;
player.on('loadedmetadata',function  (e) {if(!seeked){seeked = true;player.seek(20);}
});

7. 如何禁用进度条

自定义skinLayout属性, 去掉整个controlBar或者controlBar下面的子项, 比如progress:

skinLayout: [                           {name: "bigPlayButton", align: "blabs", x: 30, y: 80},{name: "H5Loading", align: "cc"},{name: "controlBar", align: "blabs", x: 0, y: 0,children: [//{name: "progress", align: "tlabs", x: 0, y: 0},{name: "playButton", align: "tl", x: 15, y: 26},{name: "timeDisplay", align: "tl", x: 10, y: 24},{name: "fullScreenButton", align: "tr", x: 20, y: 25},{name: "volume", align: "tr", x: 20, y: 25},]}]

8. 如何切换vid和playauth

H5播放器,直接调用reloaduserPlayInfoAndVidRequestMts方法:

player.reloaduserPlayInfoAndVidRequestMts(newVid, newPlayAuth)

Flash播放器需要销毁,根据新的vid和playauth重新创建一个:

//销毁flashPlayer.dispose();$('#flashPlayer').empty();//重新创建flashPlayer = new Aliplayer({id: 'flashPlayer',autoplay: true,playsinline:true,vid: newVid,playauth: newPlayAuth,useFlashPrism:true});

9. 如何定时获取播放时间

通过定时器每秒调用播放器的getCurrentTime方法获取播放时间, 在暂停、出错和结束播放时清除定时器。

var timer = null;
function getTime()
{ var currentTime = player.getCurrentTime();//to dotimer = setTimeout(getTime,1000);
}
//清除定时器
function clear()
{if(timer){clearTimeout(timer);timer = null;}
}
player.on('ended',function  (e) {clear();});
player.on('pause',function  (e) {clear();});
player.on('error',function  (e) {clear();});

10. 如何调整H5播放器的播放按钮的大小和位置

重写CSS,比如减小一倍:

.prism-player .prism-big-play-btn {width: 45px;height: 45px;background-size: 128px 256px;
}

位置可以通过设置skinLayout里bigPlayButton的x,y属性:

skinLayout: [                           {name: "bigPlayButton", align: "blabs", x: 30, y: 80},{name: "H5Loading", align: "cc"},{name: "controlBar", align: "blabs", x: 0, y: 0,children: [{name: "progress", align: "tlabs", x: 0, y: 0},{name: "playButton", align: "tl", x: 15, y: 26},{name: "timeDisplay", align: "tl", x: 10, y: 24},{name: "fullScreenButton", align: "tr", x: 20, y: 25},{name: "volume", align: "tr", x: 20, y: 25},]}]

11. 手机端播放视频不希望弹出全屏,要小窗播放问题

  • 手机端不希望全屏播放,iOS可以设置属性playsinline:true。
  • Android手机在微信和QQ浏览器里自动全屏播放,这是腾讯浏览器的内置行为,不能修改,原因是由于腾讯浏览器挟持了video标签,由腾讯内置的播放器播放视频,但可以启用同层播放功能,可以解决视频覆盖Dom元素的问题如何启用H5的同层播放

12. 启用IE浏览器以最高级别的可用模式显示内容

小于IE10的浏览器需要启用最高级别的可用模式显示内容模式:

<meta http-equiv="x-ua-compatible" content="IE=edge" >

13. Flash播放器播放m3u8提示跨域错误

播放器跨域访问时需要添加策略文件,即在视频播放链接所在域名的根目录下,添加crossdomain.xml文件,其中添加播放器所在域名的权限,

例如:http://test1.com/app/test.m3u8需要添加http://test1.com/crossdomain.xml

<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy><allow-access-from domain="*"/><allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>

14. Flash播放器封面图片无法显示

  • 确认cover字段输入url是否有效
  • 确认cover输入的url所在域名是否存在有效的crossdomain.xml文件

为了扶持更多创业者,降低入行门槛,视频点播已在原有的视频点播服务五个套餐包基础上,推出了超值体验套餐包。
只需9.9元即可获得10GB流量、50GB存储、100分钟转码,可供个人、小微企业门户网站体验使用。

点击进入活动页面,立即购买,完成支付

阿里视频云web播放器常见问题汇总相关推荐

  1. 百度网盘播放地址html,百度云web播放器cyberplayer的flv播放地址一定要支持跨域访问如何设置...

    cyberplayer, 官方demo 百度云web播放器: Cyberplayer3.0 Demo http://cyberplayer.bcelive.com/demo/new/index.htm ...

  2. html 百度云 视频无法播放器,关于前端直播(videoJS与百度云web播放器:Cyberplayer3.0试用)...

    videoJS 实现PC/移动端适应直播,暂停播放出现广告(哎,万恶的广告)git 打开方式 下载此demo,浏览器打开 index.htmlgithub 记录 初始化 直接在标签里面加上 class ...

  3. html影音播放器百度云,关于前端直播(videoJS与百度云web播放器:Cyberplayer3.0试用)...

    文章目录 videoJS 打开方式 记录 初始化 居中播放按钮 百度视频播放器demo 打开方式 修改 videoJS videoJs 文档 https://docs.videojs.com/docs ...

  4. 【无标题】阿里云web播放器 ios报4301错误

    在使用阿里云播放器播放阿里云加密视频时候苹果的手机和电脑都会报错4013错误,我们的原因是后台的debug没有关闭,下次遇到可作为造成原因之一查看

  5. 阿里云Aliplayer视频播放(web播放器)

    1.官方文档https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV 2 ...

  6. 知识付费音视频和直播播放器

    知识付费音视频播放和直播业务是使用基于浏览器环境的阿里云Web播放器SDK(Web Aliplayer SDK)为技术载体. 阿里云Web播放器SDK,支持Flash和H5两种播放技术,Flash模式 ...

  7. Web播放器 TcPlayer——腾讯直播sdk的网页播放器

    https://www.qcloud.com/document/product/267/7479 功能介绍 腾讯云Web播放器主要解决在手机浏览器和PC浏览器上播放音视频流的问题,使您的视频内容可以不 ...

  8. 阿里云点播 web 播放器

    浅谈 最近遇到很多人使用阿里云点播 web 播放器,通过 STS 令牌的方式去播放 MTS 转码完成后的资源出现问题,"路见不平一声吼,写个过程先献丑",只是做了最基础的功能,看官 ...

  9. 360视频云Web前端HEVC播放器实践剖析

    360视频云前端团队围绕HEVC前端播放及解密实现了一套基于WebAssembly.WebWorker的通用模块化Web播放器,在LiveVideoStackCon2019深圳的演讲中360奇舞团We ...

最新文章

  1. mysql 5.6 innodb_MYSQL 5.6中禁用INNODB引擎
  2. 楷书书法规则_硬笔书法入门学习“三步法”,让练字不再难
  3. leetCode刷题--两数相加
  4. python-sdk-demo的打包
  5. setdata改数组里的值 微信小程序_今日艰难笔记redux小程序随记
  6. densenet网络结构_FC-DENSENET用于图像分割学习笔记
  7. 开源软件执照检查和工具探讨(Discuss the audit tools for open source license GPL/LGPL/MIT)
  8. java语言精粹_java 成神之路 (一)
  9. __new__()方法的使用和实例化
  10. 在qt中使用QSplitter设置初始比例setStretchFactor失效的解决方法
  11. 解析数论 2: Abel求和法
  12. 惯性导航算法(二)-欧拉角法(下)+方向余弦矩阵(上)
  13. html表单鼠标悬停变色,当我将鼠标悬停在html表格中时,更改单元格中颜色的颜色...
  14. U盘插入电脑识别不出来,如何解决?
  15. 计算机应用个人职业发展规划简短,个人职业生涯规划
  16. 苹果手机开不了机怎么办
  17. oracle数据库卷管理,AIX系统逻辑卷管理
  18. 【JZOJ2109】清兵线【dp】
  19. SQL SERVER 生僻字查询问题和关键字COLLATE
  20. JZOJ_100029. 【NOIP2017提高A组模拟7.8】陪审团 (Standard IO)

热门文章

  1. 百度Sugar BI 数据可视化里的标签页组件如何实现
  2. 沙箱环境下实现支付宝网站支付
  3. 买礼物的艰辛【二分】
  4. 微信小程序使用canvas绘制分享海报
  5. 直播网络 的协议选择
  6. 智能电视是否是一台计算机,误区四 智能电视代替电脑使用_平板电视_液晶电视评测-中关村在线...
  7. MySql在Springboot项目中报错errorCode 1045 ,state 28000
  8. u盘乱码怎么办?数据丢失如何恢复?(详解)
  9. oracle not in minus,Oracle Minus关键字 不包含...
  10. 驱动器空间、关节空间与笛卡尔空间