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

简介: 1. 如何正确选择播放器 Aliplayer播放器包含H5、Flash、自适应播放器,建议用户选择自适应播放器,可以根据终端类型、浏览器类型和地址协议选择最合适的播放器。 如果是加密播放只能选择Flash播放器,H5现在还不支持加密播放。

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文件

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

image

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

image

目录
相关文章
|
语音技术 Python
在语音信号处理中,预加重
在语音信号处理中,预加重
1252 2
|
存储 自然语言处理 数据处理
PaddleNLP--UIE--小样本快速提升性能(含doccona标注
需求跨领域跨任务:领域之间知识迁移难度高,如通用领域知识很难迁移到垂类领域,垂类领域之间的知识很难相互迁移;存在实体、关系、事件等不同的信息抽取任务需求。 - 定制化程度高:针对实体、关系、事件等不同的信息抽取任务,需要开发不同的模型,开发成本和机器资源消耗都很大。 - 训练数据无或很少:部分领域数据稀缺,难以获取,且领域专业性使得数据标注门槛高。
PaddleNLP--UIE--小样本快速提升性能(含doccona标注
|
11月前
|
存储 人工智能 API
阿里 Qoder 新升级,Repo Wiki 支持共享、编辑和导出
Qoder 是阿里巴巴推出的 Agentic 编程平台,集成顶尖编程模型,具备强大上下文工程能力,可一次检索10万代码文件,大幅提升软件开发效率。其 Repo Wiki 功能自动生成结构化文档,支持共享、编辑与导出,助力知识沉淀与团队协作。
|
Java 机器人 程序员
从入门到精通:五种 List 遍历方法对比与实战指南
小米是一位热爱分享技术的程序员,本文详细介绍了 Java 中遍历 List 的五种方式:经典 for 循环、增强 for 循环、Iterator 和 ListIterator、Stream API 以及 forEach 方法。每种方式都有其适用场景和优缺点,例如 for 循环适合频繁访问索引,增强 for 循环和 forEach 方法代码简洁,Stream API 适合大数据量操作,ListIterator 支持双向遍历。文章通过生动的小故事和代码示例,帮助读者更好地理解和选择合适的遍历方式。
951 2
|
Java Maven
ProtostuffUtil—快速序列化和反序列化对象工具
ProtostuffUtil—快速序列化和反序列化对象工具
473 0
|
移动开发 小程序 安全
原生小程序Donut多端开发
随着移动应用开发的不断发展,跨平台开发成为了一个备受关注的话题。开发人员希望能够使用一套代码库,同时支持多个平台,从而提高开发效率并覆盖更广泛的用户群体。在小程序领域,微信 Donut 多端(也称为原生小程序 Donut 多端)为开发人员提供了一种全新的跨平台开发方式。本文将介绍 Donut 多端的概念、特点以及如何开始使用它来开发跨平台小程序。
794 0
|
机器学习/深度学习 人工智能 自然语言处理
大模型的特点、重要概念及工作方式详解
大模型是具有大量参数和复杂结构的深度学习模型,通过处理大量数据实现高效任务解决。其特点包括参数规模庞大、深层网络结构、预训练与微调、多任务学习和自适应能力。重要概念有注意力机制、Transformer架构、迁移学习和分布式训练。大模型的工作方式包括输入处理、特征提取、预测与损失计算、反向传播与优化,以及评估与微调。这些特性使其在自然语言处理、计算机视觉等领域取得显著进展。
5624 0
|
机器学习/深度学习 资源调度 算法
对数几率回归
对数几率回归
727 0
|
存储 数据库 Android开发
Manifest.xml 入门基础(一) 概述与&lt;manifest&gt;标签
Manifest.xml 入门基础 (一)概述与&lt;manifest&gt;标签 第零讲 概述 每个应用的根目录中都必须包含一个 AndroidManifest.xml 文件(且文件名精确无误)。 清单文件向 Android 系统提供应用的必要信息,系统必须具有这些信息方可运行应用的任何代码。 此外,清单文件还可执行以下操作: (1)为应用的 Java 软件包
2389 0
|
存储 弹性计算 监控
【数据传输服务用户测评】阿里云DTS和MongoShake的性能对比
本文聚焦DTS MongoDB->MongoDB 和 MongoShake 数据同步的性能,分别针对副本集/分片集群架构、单表/多表、全量/增量同步进行性能的对比。
87102 9