阿里视频云web播放器常见问题汇总

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.ready
                debug: 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 do
   timer = 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文件
时间: 2024-09-23 17:40:07

阿里视频云web播放器常见问题汇总的相关文章

【问答合集】阿里视频云常见技术问题汇总——内含技术文档40+ 持续更新中

一.前言 我们发现现在非常多的客户对阿里视频云服务了解不多,本文档的核心目标是将用户使用阿里视频云服务(点播,直播,连麦)的常见问题做一个系统的归纳.这可能不仅仅是一个FAQ,我们会试图将具体实现给开发者讲清楚,希望开发者能够更加深入的了解视频云的核心团队的架构设计方案.并且提供一系列的解决方案.个人认为端SDK是最接近客户的,所以所有的问题出发点都是从端SDK来讲解的,但是会试图结合云端服务的设计将问题讲清楚. 二.汇总常见问题方案 2.1 点播服务相关 [视频点播]点播服务是什么?为什么需要

阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)

阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载.首屏秒开.低延时等业务场景,为用户提供简单.快速.安全.稳定的视频播放服务.本文衔接上文,详细介绍web播放器的功能及实现. 一.基本概况及功能 播放器架构 Aliplayer Web播放器分为H5和Flash两个,Flash播放器随着技术的发展会逐渐被边缘化,所以我们以后只做维护,不会更新功能了,

阿里视频云最强转码技术揭秘:窄带高清原理解析+用户接入指南

有人说2017年是中国网络视频发展的黄金时期,根据中国互联网信息中心发布的<中国互联网发展状况统计报告>显示,截止2017上半年,网络视频用户规模已经达到5.65 亿,半年增长3.7%. 随着社交媒体.网络直播.VR.AR的兴起,用户对于视频的多元化.场景化.临场感.体验的追求更加极致,视频网站竞争尤为激烈,各大视频网站都在努力布局结合云计算.大数据.视频服务等能力实现技术创新,提升用户观感. 根据网络调研显示,视频中经常出现 转码失真.拍摄噪声.卡顿.低帧率卡顿.低分辨率模糊.镜头抖动等现象

双11:阿里视频云ApsaraVideo是怎样让4000万人同时狂欢的?

阿里视频云ApsaraVideo 在今年的双11中,全球直播狂欢夜成为了一大亮点.根据官方披露数据,直播总观看人数超4257万,同时观看人数峰值达529万,在云端实现了高计算复杂度的H.265实时转码和窄带高清技术.其实不光是双11,直播已经成为了2016年互联网最火爆的话题.除了内容的大规模涌现,背后其实是计算,存储,带宽的升级和成本的下降.而ApsaraVideo的出现,让直播的技术门槛更是迅速下降,可以使企业快速的上线自己的视频业务.笔者作为参与双11视频云的攻城狮,希望通过本文和大家分享

一分钟了解阿里视频云

什么是阿里视频云? 阿里视频云提供一站式视频点播.直播.短视频.监控等服务,集内容采集.上传加速.存储录制.码转/截图/水印.鉴黄服务.CDN分发及播放器等功能,用户可以非常简单地借此开展自己的网络视频业务.用户可通过"海量存储.高效分发.极速网络"等强大服务,轻松坐享CCTV-5.新浪微博.知乎等量级的传播能力. 阿里视频云有什么优势呢? 1. 完善且易接入的产品及服务,提供从推流,视频云服务,到播放的全套技术方案.最快1天搭建起直播系统.2. 业内最低的播放卡顿率,流畅度98%.业

高级算法专家储开颜:无端不视频 阿里视频云三大端上技术能力

近日,阿里云高级算法专家储开颜在云栖大会北京峰会上进行了<视不可挡,无端不视频>的主题演讲,介绍了当今视频行业的发展情况,并对阿里视频云三大端上的技术能力做了详细解读. 视不可挡 在线视频市场发展现状 本次分享从"视不可挡"开始,根据行业报告显示,2017上半年中国在线视频行业用户规模已经接近6亿,从2014年至今,用户规模增长率一直稳中有升.而2017年在线视频市场规模已经达到了503.3亿元,可以预见的整个2017年在视频领域,发展的机会越来越多. 另外有数据报告显示,

求支持mp4大部分编码格式的WEB播放器(h264和非h254)

问题描述 求支持mp4大部分编码格式的WEB播放器(h264和非h254) 因为目前公司的项目视频素材的上传对外开放了,用户可以上传任何编码格式的mp4, 但是现在HTML5 Video标签只支持h264编码格式的mp4播放,其他编码格式的 只有声音没有图像(IIS已改成么 .mp4=video/mp4),我想通过一个WEB播放器,播放所 有编码格式的mp4(大部分也可以),不知道有没有? 或者是我IIS将mp4改为application/octet-stream 之后, 通过videojs或者

阿里视频云总经理朱照远:视界大有不同

2017年5月23日,云栖大会成都峰会圆满落幕,峰会引领云端的技术盛会,全方位展示最新云上产品,以全新视角解读大数据时代下的新营销新生态,带领用户感知计算无边界的畅快体验.近百场主题演讲,14个专场分论坛,同期举办的8场TECH INSIGHT专场技术实战, 吸引了成都及周边省市万余名开发者参与.在传媒专场上,阿里云CDN与视频云产品做了集中亮相,阿里视频云总经理朱照远进行了题为"视界大有不同"的主题演讲. CDN大有作为 体量遥遥领先 作为视频云的支撑,主题演讲从CDN拉开序幕.朱照

上传中文的视频文件但是播放器不支持中文

问题描述 上传本地中文视频文件到服务器后我将中文视频文件随机改名为英文或数字的的文件用的播放器是只支持英文或数字的但是不能读取服务器除web项目以外的文件夹路径,它只播放web项目里面的视频文件我试着将上传文件路径改成web项目里面的文件但是web项目部署后在tomcat里面的中文视频文件又不支持改名也就不能播放了大家知道有支持中文视频文件的播放器吗?或者是上传文件能自动改文件名得组件?我现在用的是SmartUpload问问大家有啥意见我哪个环节出错了?请大家多多发表意见讨论