Web播放器常见问题

License相关问题

License无效、过期等问题请参见License相关常见问题。

各端播放器共性问题

• 各端都有可能出现的问题，汇总在各端播放器公共常见问题。

• 如果您有一定的开发经验，也可进行播放异常自主排查。

开发问题

H5播放器如何切换vid和playauth？

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

replayByVidAndPlayAuth 方法是否触发 ready 事件？

replayByVidAndPlayAuth 方法会触发 ready 事件；ready 事件在播放器视频初始化完成、界面渲染完毕时触发，此时可安全调用 seek 等方法。可通过以下方式监听处理：

player.on('ready', function(){...});

如何调整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 },
      ],
    },
  ]

调用seek方法后，播放器如何实现暂停按钮？

按钮状态取决于播放器原来的状态，想要实现暂停按钮，可以在seek后再调用player.pause()方法。

H5播放器如何初始播放位置？

通过 watchStartTime 参数可以指定初始播放位置。

new Aliplayer({
  watchStartTime: 60, // 从第 60 秒开始播放
})

详情请参见Aliplayer API说明。

如何设置自动播放时的自动全屏？

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//example.aliyundoc.com/video/media02.mp4",
    width: "100%",
    height: "500px",
    autoplay: true,
    qualitySort: "asc",
    mediaType: "video",
    preload: true,
    isLive: false,
  },
  function (player) {
    player.mute();
    console.log("The player is created");
  }
);
player.on("ready", function () {
  player.fullscreenService.requestFullScreen();
});

如何禁用进度条？

可以使用 disableSeek: true 参数来禁止拖动进度条，请参见禁止拖动进度条。

如何定时获取播放时间？

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

var timer = null;

timer = setInterval(() => {
  var current = player.getCurrentTime();
  console.log(current);
}, 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();
});

Web 播放器 SDK 其他常见使用问题汇总

• seek 方法精度：seek 方法支持浮点数（如 10.5），建议使用向下取整或保留较少小数位以提高兼容性。

• 直播流断联重连：支持配置重连次数，若重连后仍无法恢复，建议监听 error 事件处理，示例：player.on('error', (e) => { var code = String(e.paramData.error_code); })

• License Key 与下载功能：播放使用的 License Key 与下载功能不互通，下载基于 app 信息生成。

• 控制栏有文字无图标：检查是否正确引入 aliplayer-min.css；避免同时使用 skinLayoutIgnore 和 skinLayout（前者优先级更高会剔除组件）；给播放器容器设置固定高度（如 400 px 以上）避免布局塌陷；可参考官方 Vue Demo 比对调试。

• iOS Flutter 播放器报错 537067523：设置 TraceID（FlutterAliplayer.setTraceID）便于日志排查；升级 Flutter 播放器 SDK 至 7.14.0 优化网络库；若未使用 阿里云 CDN，需联系对应 CDN 厂商检查请求日志。

如何查看及升级 Web 播放器 SDK 版本号？

查看方法：检查项目中引入的 aliplayer-min.js 文件或其代码配置中的版本号字段。

升级方法：修改网站语言包文件（language.SC_UTF8.php、language.SC_GBK.php、language.TC_UTF8.php、language.TC_BIG5.php）第 30 行的版本号变量值，确保 4 个文件同步修改为新版本号（如从 2.27.1 改为 2.37.8）。

Aliplayer preload 参数 true 和 false 有什么区别？

preload: true 表示开启预加载，preload: false 表示关闭预加载。

播放问题与错误

经过H.265编码的视频无法播放

Web播放器SDK从2.14.0版本开始支持播放H.265编码协议的视频流，如需使用此功能，需要申请相应的License授权，并配置参数开启H.265功能。具体操作，请参见播放H.265/H.266编码协议视频流。

H5播放器播放FLV、M3U8文件时提示跨域错误

当使用Web播放器出现Access is denied for this document或提示Access-Control-Allow-Origin等相关报错时，需要启用播放域名允许跨域访问。详细内容，请参见配置跨域访问。

H5播放器无法横屏

播放器SDK没有横屏的接口，iOS横屏需要系统横屏，Android全屏之后默认就是横屏。

H5播放器播放FLV视频时发起的请求未携带Referer

1. 播放器发起的请求首先遵循您网站设置的Referrer-Policy，请确保您网站的Referrer-Policy为允许视频请求携带Referer。

2. 如果您网站的Referrer-Policy允许视频请求携带Referer，但是实际请求视频时没有携带Referer（在开启Referer ACL访问控制的时候可能会导致播放被禁止），则可以通过传入播放器参数enableWorker: false来解决。

H5播放器播放视频时视频未填满整个播放器，播放器有黑边，如何处理？

使用H5播放器播放视频时出现视频未填满整个播放器，播放器有黑边的情况。

此黑边为播放器容器的背景色，可以通过给video标签设置css属性object-fit: cover;来解决该问题。

AliPlayer 初始化报错 TypeError: Failed to execute 'getComputedStyle' on 'Window' 如何解决？

播放器初始化 controlBar.volume（音量控件）时，内部 _getBottom() 方法获取到的 DOM 元素为 null 或非 Element 类型（通常因容器未渲染完成导致），调用 getComputedStyle 时报错并阻断后续初始化流程。

解决方法

• 推荐方案：升级 阿里云 Web 播放器 SDK 至 2.37.8 及以上版本，该版本已修复此兼容性问题。

• 临时规避方案：在播放器配置中添加 skinLayoutIgnore: ["controlBar.volume"] 忽略音量控件初始化；若需保留音量控件，可在初始化前检查容器是否存在且 offsetWidth 大于 0，若不满足则延迟 200 ms 重试初始化。

// 首选地址
https://dns.alidns.com/dns-query
// 备用地址
https://doh.pub/dns-query

loadByUrl iOS和Android均无法使用

// seek会只能跳转，无法播放
// play在iOS上只能从头播放
// iOS上点全屏播放video会被iOS原生播放器劫持

document.querySelector(".no1").onclick = function () {
  player.loadByUrl("//player.alicdn.com/resource/player/qupai.mp4");
};

// 优先监听play和canplay事件去seek，有些浏览器可能不生效，可以考虑使用在第一次timeupdate的时候去seek
player.on("canplay", function () {
  player.seek(20);
});
// iOS下全屏被劫持，没有对应处理办法

切换视频源，但仍然播放上一条视频

问题现象：2.9.11版本Web播放器SDK，在Windows10，360浏览器兼容模式下，loadByUrl功能异常，切换视频源仍会播放上一条视频。

问题原因：浏览器兼容问题。

解决方法：请使用2.9.19及以后版本的Web播放器SDK。

player.seek()方法在iOS下失效

// 优先在play事件和canplay事件调用seek，否则可能会不生效
player.on("canplay", function () {
  player.seek(20);
});

直播过程中暂停播放后，再次播放时如何赶上最新直播片段

问题描述

直播过程中如果将应用切换至后台，暂停播放后，返回应用再次播放时会从暂停的时刻继续播放，如何设置可以减少播放延迟，赶上最新的直播片段。

解决方案

再次播放时，会从您暂停的时刻继续播放，且不能通过参数设置加快播放速度。建议您重新拉流，重新调用播放器播放该直播流。

如何实现在微信小程序中使用阿里云Web播放器播放视频？

阿里云Web播放器不支持在微信小程序中运行，您需要使用小程序自带的Video组件去播放视频。相关Demo请参见微信小程序。

直播跨域拉流失败

如果本地跨域校验失败，请首先检查控制台中的域名管理配置页面。如果仅配置了自有域名，则可能会导致 localhost 报错；在默认情况下，如果客户未进行配置，localhost 将会通过校验。

上传到视频点播中的视频，在其他端都能正常播放，但是在iOS端不能播放

可能原因：iOS端的Safari浏览器兼容性不够，当视频压缩比例太高，或视频的编码级别为high时，都可能导致Safari浏览器无法解码播放。

解决方法：建议对视频进行转码处理后再播放，详细操作请参见音视频转码。

平台特定问题

如何移除WebView的默认封面？

问题现象：在部分安卓手机的WebView中，如果没有为<video>标签指定poster属性，WebView会默认展示一个默认封面：WebView 的默认封面表现为灰色背景、中央显示圆形播放按钮的视频播放器初始界面。

解决方法：如果想要移除该默认封面，则可以通过下述方法为<video>标签指定一个无效的poster属性来覆盖这个WebView的默认封面。

extraInfo: { poster: 'noposter' } // 播放器参数 extraInfo 的内容会透传到 <video> 标签上

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

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

在微信里如何自动播放？

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