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)

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

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

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.

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