阿里云
发表主题 回复主题
  • 15595阅读
  • 11回复

[活动/公告]阿里视频云web播放器常见问题汇总

级别: 论坛版主
发帖
95
云币
234
— 本帖被 不靠谱贝贝 执行置顶操作(2017-12-15) —
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. 在微信里如何自动播放
  1. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  2. <script>
  3. function autoPlay() {
  4.             wx.config({
  5.                 // 配置信息, 即使不正确也能使用 wx.ready
  6.                 debug: false,
  7.                 appId: '',
  8.                 timestamp: 1,
  9.                 nonceStr: '',
  10.                 signature: '',
  11.                 jsApiList: []
  12.             });
  13.             wx.ready(function() {
  14.                 var video=$(player.el()).find('video')[0];
  15.                 video.play();
  16.             });
  17.     };
  18.     // 解决ios不自动播放的问题
  19.     autoPlay();
  20. </script>



6. 播放器如何初始播放位置
H5播放器:
  1. var seeked = false;
  2. player.on('canplaythrough',function  (e) {
  3.   if(!seeked)
  4.   {
  5.     seeked = true;
  6.     player.seek(100);
  7.   }
  8. });


Flash 播放器:
  1. var seeked = false;
  2. player.on('loadedmetadata',function  (e) {
  3.   if(!seeked)
  4.   {
  5.     seeked = true;
  6.     player.seek(20);
  7.   }
  8. });



7. 如何禁用进度条
自定义skinLayout属性, 去掉整个controlBar或者controlBar下面的子项, 比如progress:
  1. skinLayout: [                          
  2.     {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
  3.     {
  4.       name: "H5Loading", align: "cc"
  5.     },
  6.     {
  7.       name: "controlBar", align: "blabs", x: 0, y: 0,
  8.       children: [
  9.         //{name: "progress", align: "tlabs", x: 0, y: 0},
  10.         {name: "playButton", align: "tl", x: 15, y: 26},
  11.         {name: "timeDisplay", align: "tl", x: 10, y: 24},
  12.         {name: "fullScreenButton", align: "tr", x: 20, y: 25},
  13.         {name: "volume", align: "tr", x: 20, y: 25},
  14.       ]
  15.     }
  16.   ]



8. 如何切换vid和playauth
H5播放器,直接调用reloaduserPlayInfoAndVidRequestMts方法:
  1. player.reloaduserPlayInfoAndVidRequestMts(newVid, newPlayAuth)

Flash播放器需要销毁,根据新的vid和playauth重新创建一个:
  1. //销毁
  2.      flashPlayer.dispose();
  3.      $('#flashPlayer').empty();
  4.      //重新创建
  5.      flashPlayer = new Aliplayer({
  6.             id: 'flashPlayer',
  7.             autoplay: true,
  8.             playsinline:true,
  9.             vid: newVid,
  10.             playauth: newPlayAuth,
  11.             useFlashPrism:true
  12.         });



9. 如何定时获取播放时间
通过定时器每秒调用播放器的getCurrentTime方法获取播放时间, 在暂停、出错和结束播放时清除定时器。
  1. var timer = null;
  2. function getTime()
  3. {
  4.    var currentTime = player.getCurrentTime();
  5.    //to do
  6.    timer = setTimeout(getTime,1000);
  7. }
  8. //清除定时器
  9. function clear()
  10. {
  11.    if(timer)
  12.    {
  13.       clearTimeout(timer);
  14.       timer = null;
  15.    }
  16. }
  17. player.on('ended',function  (e) {
  18.   clear();
  19. });
  20. player.on('pause',function  (e) {
  21.   clear();
  22. });
  23. player.on('error',function  (e) {
  24.   clear();
  25. });



10. 如何调整H5播放器的播放按钮的大小和位置
重写CSS,比如减小一倍:
  1. .prism-player .prism-big-play-btn {
  2.     width: 45px;
  3.     height: 45px;
  4.     background-size: 128px 256px;
  5. }



位置可以通过设置skinLayout里bigPlayButton的x,y属性:
  1. skinLayout: [                          
  2.     {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
  3.     {
  4.       name: "H5Loading", align: "cc"
  5.     },
  6.     {
  7.       name: "controlBar", align: "blabs", x: 0, y: 0,
  8.       children: [
  9.         {name: "progress", align: "tlabs", x: 0, y: 0},
  10.         {name: "playButton", align: "tl", x: 15, y: 26},
  11.         {name: "timeDisplay", align: "tl", x: 10, y: 24},
  12.         {name: "fullScreenButton", align: "tr", x: 20, y: 25},
  13.         {name: "volume", align: "tr", x: 20, y: 25},
  14.       ]
  15.     }
  16.   ]



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



12. 启用IE浏览器以最高级别的可用模式显示内容
小于IE10的浏览器需要启用最高级别的可用模式显示内容模式:
  1. <meta http-equiv="x-ua-compatible" content="IE=edge" >


13. Flash播放器播放m3u8提示跨域错误
播放器跨域访问时需要添加策略文件,即在视频播放链接所在域名的根目录下,添加crossdomain.xml文件,其中添加播放器所在域名的权限,
例如:http://test1.com/app/test.m3u8需要添加[url]http://test1.com/crossdomain.xml[/url]
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <cross-domain-policy>
  3.     <allow-access-from domain="*"/>
  4.     <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
  5. </cross-domain-policy>



14. Flash播放器封面图片无法显示
  • 确认cover字段输入url是否有效
  • 确认cover输入的url所在域名是否存在有效的crossdomain.xml文件



对于web播放器还有什么疑问,都可以在视频云板块发帖,我们会尽全力为大家解开疑惑~谢谢!
级别: 新人
发帖
2
云币
2
只看该作者 沙发  发表于: 2017-12-20
视频点播服务开通后,上传视频转码后,预览时无法播放视频
提示如图  。已经cname,启用
[ 此帖被aaronfrl在2017-12-20 17:12重新编辑 ]
级别: 新人
发帖
2
云币
2
只看该作者 板凳  发表于: 2017-12-20
Re阿里视频云web播放器常见问题汇总
使用阿里云视频点播服务过程出了技术问题,除了提工单,还有更快捷的方式吗
级别: 新人
发帖
3
云币
3
只看该作者 地板  发表于: 03-21
6播放器如何初始播放位置
完全没用,跳过去还会再初始化,为什么不把flash和H5的分开写,看起来好痛苦
级别: 新人
发帖
3
云币
3
只看该作者 4楼 发表于: 03-22
6播放器如何初始播放位置
.....................H5可以用FALSH里面的seek方法根本不生效
级别: 新人
发帖
3
云币
3
只看该作者 5楼 发表于: 03-22
6播放器如何初始播放位置
不能用啊不能用。。。。
级别: 新人
发帖
14
云币
20
只看该作者 6楼 发表于: 04-25
Re阿里视频云web播放器常见问题汇总
官方案例4.1 播放器简单使用说明:
https://help.aliyun.com/document_detail/51991.html?spm=a2c4e.11155515.0.0.zZeutB#h2-4-1-6

使用该示例代码,将其中的视频地址替换为自己的地址,然后在调试的时候发现chrome正常显示且能播放,但IE8及360兼容模式不显示,一片空白。
[ 此帖被小树9527在2018-04-25 11:02重新编辑 ]
级别: 菜鸟
发帖
52
云币
85
只看该作者 7楼 发表于: 04-29
Re阿里视频云web播放器常见问题汇总
是不是必须要用阿里云视频点播服务才可以使用播放器?
级别: 新人
发帖
1
云币
1
只看该作者 8楼 发表于: 05-04
Re阿里视频云web播放器常见问题汇总
级别: 新人
发帖
3
云币
3
只看该作者 9楼 发表于: 05-28
Re阿里视频云web播放器常见问题汇总
1.如何设置自定义倍数  不是官方设置的 1.25X 1.5X 2X   是我们自己自定义 倍数 如何设置
2. 如何使用键盘快捷方式     就没有获取当前 播放器状态的东东么
  document.onkeydown=function(e){
        var keyNum=window.event ? e.keyCode :e.which;
        if(keyNum=='13'){
            if(player.on("play")){
                player.pause();
            }else{
                player.play();
            }

        }
    };
级别: 新人
发帖
3
云币
3
只看该作者 10楼 发表于: 06-07
Re阿里视频云web播放器常见问题汇总
直播得时候 怎么截图啊
级别: 小白
发帖
20
云币
26
只看该作者 11楼 发表于: 昨天 17:39
Re阿里视频云web播放器常见问题汇总
最大的问题是没钱
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
验证问题: 阿里云官网域名是什么? 正确答案:www.aliyun.com
上一个 下一个