Player SDK for Web FAQ

License-related issues

Resolve invalid or expired license issues in License FAQ.

Common issues across platforms

• For platform-independent issues, check Cross-platform player FAQs.

• Experienced developers can also troubleshoot playback errors independently.

Development issues

Switching vid and playauth in the HTML5 player

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

Does replayByVidAndPlayAuth trigger the ready event?

Yes. The ready event fires once the player has finished initializing the video and rendering the UI. At that point, you can safely call methods such as seek. Listen for the event with:

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

Adjusting the play button size and position

• Override the CSS to resize the play button. Example (half size):

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

• Set the x and y properties of bigPlayButton in skinLayout to reposition the play button.

  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 },
      ],
    },
  ]

After calling the seek method, how does the player implement the pause button?

The button reflects the player's prior state. Call player.pause() after seeking to show the pause button.

Setting the initial playback position

Set watchStartTime to specify the initial playback position.

new Aliplayer({
  watchStartTime: 60, // Start playback from the 60th second.
})

Aliplayer API Reference.

Enabling automatic full-screen on autoplay

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();
});

What is the difference between preload: true and preload: false in Aliplayer?

preload: true enables preloading. preload: false disables preloading.

Disabling seek on the progress bar

Set disableSeek: true to prevent users from dragging the progress bar. Disable dragging the progress bar.

Getting the current playback time periodically

Use a timer to call player.getCurrentTime() every second. Clear the timer when playback is paused, an error occurs, or playback ends.

var timer = null;

timer = setInterval(() => {
  var current = player.getCurrentTime();
  console.log(current);
}, 1000);

// Clear the timer.
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();
});

Other common issues with Player SDK for Web

1. Precision of the seek method: seek accepts floating-point values (for example, 10.5). For better compatibility, round down or use fewer decimal places.

2. Reconnecting after a live stream disconnects: You can configure the number of reconnection attempts. If playback does not recover after the configured attempts, listen for the error event to handle the failure, for example:

   player.on('error', (e) => { var code = String(e.paramData.error_code); })

3. License Key and the download feature: The License Key used for playback is not interchangeable with the download feature. Downloads are generated based on app information.

4. Control bar shows text but no icons: Check that aliplayer-min.css is correctly included. Do not use skinLayoutIgnore and skinLayout together — skinLayoutIgnore takes precedence and removes the component. Set a fixed height (400px or more) on the player container to avoid layout collapse. You can also compare your setup against the official Vue demo for debugging.

5. Player SDK for Flutter for iOS error 537067523: Set a trace ID with FlutterAliplayer.setTraceID to help with log troubleshooting; upgrade Player SDK for Flutter to 7.14.0 or later, which optimizes the network library; if you are not using Alibaba Cloud CDN, contact your CDN provider to check the request logs.

How do I check and upgrade the Player SDK for Web version?

1. Check the version: Look at the aliplayer-min.js file included in your project, or the version field in its configuration.

2. Upgrade the version (as provided by the requester): Edit the version variable on line 30 of each of the following language pack files: language.SC_UTF8.php, language.SC_GBK.php, language.TC_UTF8.php, language.TC_BIG5.php. Update all 4 files to the new version number (for example, from 2.27.1 to 2.37.8).

Playback issues and errors

H.265-encoded video fails to play

Player SDK for Web 2.14.0+ supports H.265-encoded video. You must obtain a license and configure H.265 parameters. Play H.265/H.266 encoded video streams.

Cross-origin error when playing FLV or M3U8 files

If you see "Access is denied for this document" or "Access-Control-Allow-Origin" errors, enable cross-origin access for your playback domain. Configure cross-origin access.

HTML5 player cannot enter landscape mode

The player SDK does not provide a landscape mode API. On iOS, landscape mode depends on system orientation settings. On Android, the player enters landscape mode automatically in full-screen mode.

Missing Referer header in FLV playback requests

1. Player requests follow your website's Referrer-Policy. Ensure your Referrer-Policy allows video requests to include a Referer header.

2. If the Referrer-Policy allows a Referer header but it is missing from video requests, Referer-based ACL may block playback. Set enableWorker: false to resolve this.

Removing black bars from the player window

Black bars appear when the video does not fill the player window.

The black bars are the player container's background. Apply object-fit: cover; to the <video> tag to remove them.

AliPlayer initialization fails with TypeError: Failed to execute 'getComputedStyle' on 'Window'

Cause: During initialization of the controlBar.volume component, the internal _getBottom() method retrieves a DOM element that is null or not an Element (usually because the container has not finished rendering). Calling getComputedStyle on this value throws and blocks the rest of initialization.

Solution 1 (recommended): Upgrade Player SDK for Web to 2.37.8 or later, which fixes this compatibility issue.

Solution 2 (workaround): Add skinLayoutIgnore: ["controlBar.volume"] to the player configuration to skip initializing the volume control. If you need to keep the volume control, check that the container element exists and its offsetWidth is greater than 0 before initializing the player; if not, delay initialization by 200ms and retry.

// Primary address
https://dns.alidns.com/dns-query
// Backup address
https://doh.pub/dns-query

loadByUrl does not work on iOS and Android

// `seek` only jumps to the time, but does not play.
// `play` restarts playback from the beginning on iOS.
// On iOS, full-screen playback is hijacked by the native player.

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

// Listen for 'play' and 'canplay' events to call seek. This might not work in some browsers. As an alternative, consider calling seek on the first 'timeupdate' event.
player.on("canplay", function () {
  player.seek(20);
});
// No workaround is available for full-screen hijacking on iOS.

Previous video continues to play after the video source is switched

In Player SDK for Web 2.9.11, loadByUrl fails in 360 Browser's compatibility mode on Windows 10. The previous video continues playing after the source is switched.

Cause: browser compatibility issue.

Solution: upgrade to Player SDK for Web 2.9.19 or later.

The player.seek() method fails on iOS

// Call seek in the `play` and `canplay` events. Otherwise, it may not take effect.
player.on("canplay", function () {
  player.seek(20);
});

Catching up to the live edge after resuming a stream

Problem description

If you switch your application to the background when you are playing a live stream, the playback is paused. After you return to the application, the live stream continues to play from the point in time at which the pause occurs. Is there any configuration that can be made to reduce the playback latency so that the latest clip can be played after playback is resumed?

Solution

After you resume the playback, the live stream continues to play from the point in time at which the pause occurs. You cannot configure parameters to speed up the playback. We recommend that you pull the live stream again and then use the player to play the live stream again.

Using Player SDK for Web in WeChat mini programs

Player SDK for Web does not run in WeChat mini programs. Use the mini program's built-in video component instead. WeChat mini program.

Cross-origin stream pulling fails for a live stream

If local cross-origin validation fails, check your Domain Management configuration. Requests from localhost fail if only your own domain is configured. By default, localhost passes validation when no domains are configured.

VOD video playback fails on iOS

Possible cause: Safari on iOS may fail to decode videos with a high compression ratio or high encoding profile.

Solution: Transcode the video before playback. Audio and video transcoding.

Platform-specific issues

Removing the default thumbnail in WebView

On some Android WebViews, omitting the poster attribute on the <video> tag causes a default thumbnail (gray background with a play button) to appear.

Solution: Set an invalid poster attribute on the <video> tag to override the default.

extraInfo: { poster: 'noposter' } // The content of the player parameter `extraInfo` is passed to the <video> tag.

Enabling highest document mode in IE

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

Enabling autoplay in WeChat

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {            
  wx.config({
      // Configuration details. wx.ready can be used even if the details are incorrect.
      debug: false,
      appId: '',
      timestamp: 1,
      nonceStr: '',
      signature: '',
      jsApiList: []
  });
  wx.ready(function() {
      var video=$(player.el()).find('video')[0];
      video.play();
  });
};
// Workaround for autoplay issue on iOS.
autoPlay();
</script>