This topic provides answers to frequently asked questions about ApsaraVideo Player for Web.

How do I select a player for ApsaraVideo Player for Web?

ApsaraVideo Player SDK for Web supports the HTML5 player and Flash player. When ApsaraVideo Player SDK for Web is integrated, you can specify a player or set the adaptive mode by adding the corresponding .js file. You can also click HTML5 or Flash on the Online Settings page to select a player based on your device type, browser type, and video transmission protocol.

Take note of the following items when you select a player:
  • The Flash player must be used to play videos transmitted over Real-Time Messaging Protocol (RTMP). Only browsers on PCs support the Flash player, and the support is limited. For more information, see Browsers supported by the Flash player.
  • We recommend that you use the HTML5 player to play videos transmitted over protocols other than RTMP.

HTML5 player issues

How do I enable the HTML5 player?

You can enable the HTML5 player by using one of the following methods:
  • Include the link of the JS file to enable the HTML5 player in your HTML file.
  • Enable the adaptive streaming mode and set the useH5Prism parameter to true.

How do I change the values of the vid and playauth parameters in the HTML5 player?

Call the replayByVidAndPlayAuth operation to change the values of the vid and playauth parameters. The following sample code provides an example:
 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

How do I change the size and location of the play button in the HTML5 player?

  • To change the size of the play button, rewrite the CSS code. The following sample code provides an example on reducing the size of the play button by half: 
     .prism-player .prism-big-play-btn {
    width: 45px;
    height: 45px;
    background-size: 128px 256px;
}
  • To change the location of the play button, change the values of the x and y properties in the bigPlayButton parameter of skinLayout. The following sample code provides an example:
    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},
      ]
    }
  ]

How can I implement a play/pause in the HTML5 player after I call the seek method?

Call the player.pause() method after you call the seek method to enable the pause feature. The video is played or paused based on the current state of the video when the button is pressed.

What do I do if videos cannot be played in landscape mode in the HTML5 player?

No API operation is provided in ApsaraVideo Player SDK to enable playback in landscape mode. For iOS devices, the landscape mode can be enabled in the system settings. For Android devices, the video is automatically played in landscape mode after the user enables full-screen mode.

How do I specify the start time for video playback in a player? 

var seeked = false;
player.on('canplaythrough',function  (e) {  
if(!seeked)
  {
    seeked = true;
    player.seek(100);
  }
});

What do I do if black bars are displayed when I use the HTML5 player to play videos?

When you use the HTML5 player to play videos, black bars are displayed if a video cannot fill the whole window. The following figure provides an example. FAQ

The black bars show the background color of the player container. To solve this issue, configure the CSS property object-fit: cover; for the video tag.

Flash player issues

How do I enable the video seeking feature for MP4 or FLV videos in the Flash player?

Make sure that the video data starting from the specified point in time can be obtained from Alibaba Cloud CDN. When an MP4 or FLV video is advanced or rewound, the player sends a request containing the time range information to CDN. Then, CDN receives the request and returns the corresponding video data.

To enable the video seeking feature, the following two requirements must be met:

  • Index information, such as the timestamp of MP4 videos and metadata of FLV videos, must be contained in the file header. After the player parses the index information, it obtains data points of the time range specified by the advance or rewind operation and sends a request to CDN.
  • Turn on Video Seeking in the CDN console. After you enable this feature, requests that contain the time range or byte range information can be processed. For more information, see Video seeking.

How do I change the values of the vid and playauth parameters in the Flash player?

Destroy the existing Flash player and create a new one based on the new vid and playauth values. The following sample code provides an example:

 // Destroy the existing Flash player.
     FlashPlayer.dispose();
     $('#FlashPlayer').empty();
     // Create a new Flash player.
     FlashPlayer = new Aliplayer({
            id: 'FlashPlayer',
            autoplay: true,
            playsinline:true,
            vid: newVid,
            playauth: newPlayAuth,
            useFlashPrism:true
        });

How do I specify the start time for video playback in the Flash player? 

var seeked = false;
player.on('loadedmetadata',function  (e) {
  if(!seeked)
  {
    seeked = true;
    player.seek(20);
  }
});

What do I do if a CORS error is reported when the Flash player plays M3U8 files?

Add a cross-domain policy file for the player to implement cross-domain access. You must add the cross-domain access permissions to the crossdomain.xml file and add the file to the root directory of the domain to which the streaming URL belongs.

For example, you must add http://example.com/app/test.m3u8 to http://example.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>

What do I do if the Flash player does not display video thumbnails?

  1. Check whether the thumbnail URL specified in the cover field is valid.
  2. Check whether a valid crossdomain.xml file exists in the root directory of the domain name that is included in the thumbnail URL.

Other issues

How do I use ApsaraVideo Player for Web to play videos in WeChat mini programs?

ApsaraVideo Player for Web does not support WeChat mini-programs. You must use the built-in player to play videos in WeChat mini programs. For more information about the demo, see Online trial and source code of demos.

What do I do if H.265 encoded videos cannot be played?

ApsaraVideo Player SDK for Web does not support the H.265 codec and supports only the H.264 codec. For more information, see Supported audio and video formats.

What do I do if MOV videos cannot be played?

ApsaraVideo Player SDK for Web supports MOV videos in the same way that the video tag does. If MOV videos cannot be played, the video files may be corrupt.

How do I disable the automatic full-screen feature on mobile devices?

  • Set playsinline to true for iOS devices.
  • When you play a video in WeChat or QQ Browser on an Android device, the video is forcefully displayed in full-screen mode. This is because the Tencent browser hijacks the video tag to automatically play videos in the built-in player. To resolve this issue, enable the immersive mode to prevent the Dom element from being overwritten. For more information, see How do I enable the immersive mode for the HTML5 player?.

How do I display the content in the highest available mode in Internet Explorer?

You must enable the highest available mode for Internet Explorer of a version that is earlier than Internet Explorer 10. The following sample code provides an example:
<meta http-equiv="x-ua-compatible" content="IE=edge" >

How do I enable autoplay in full-screen mode?

Mute the video and set autoplay to true to enable autoplay. Then, call the fullscreenService.requestFullScreen operation in the ready event to enable the automatic full-screen feature. The following sample code provides an example:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge" >
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  <title>Aliplayer Functions</title>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.17/skins/default/aliplayer-min.css" />
  <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.17/aliplayer-min.js"></script>
  <! -- Download the CSS and JS files before you perform subsequent operations. -->
</head>
<body>

<div id="player-con"></div>
<script>
    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 created1");
    });
  // }
  player.on('ready',function(){
  player.fullscreenService.requestFullScreen()

  })


</script>
</body>
</html>

What do I do if the live comment feature cannot be used when videos are played in full-screen mode on iOS devices?

Problem description: The live comment feature cannot be used when videos are played in full-screen mode on iOS devices. However, the feature can be used after the user exits full-screen mode.

Cause: When videos are played in full-screen mode on iOS devices, the native user interface (UI) of iOS is used. In this case, live comments cannot be displayed on videos.

Solution: You can configure the height and width of the video on iOS devices to fill the screen. This simulates the full-screen effect on iOS devices without compromising the live comment feature.

How do I integrate ApsaraVideo Player SDK and instantiate a player within the uniapp onload lifecycle? 

 // Integrate ApsaraVideo Player SDK and instantiate a player within the uniapp onload lifecycle.
            onLoad() {
            const script = document.createElement('script');
            const link = document.createElement('link');
            link.href = 'https://g.alicdn.com/de/prismplayer/2.9.16/skins/default/aliplayer-min.css'
            link.setAttribute('rel','stylesheet')
            script.onload = () => {
              console.log('Aliplayer', window.Aliplayer);
              let player = new Aliplayer({
                "id": "player-con",
                source:"//player.alicdn.com/video/aliyunmedia.mp4",
                "width": "100%",
                "height": "500px",
                "autoplay": false,
                "isLive": false,
                "rePlay": false,
                "playsinline": true,
                "preload": true,
                "controlBarVisibility": "hover",
                "useH5Prism": true
              }, function (player) {
              })
            }
            script.src = 'https://g.alicdn.com/de/prismplayer/2.9.16/aliplayer-min.js';
            script.setAttribute('type','text/javascript')
            document.body.appendChild(script);
            document.body.appendChild(link);
        }

What do I do if the player.seek() method does not take effect for iOS devices?

You need to call the player.seek() method in the play event and the canplay event. Otherwise, the method may not take effect. 
 // Call the player.seek() method in the play and canplay events. Otherwise, the method may not take effect.
      player.on('canplay',function(){
                player.seek(20)
             })

What do I do if loadByUrl cannot be called on iOS or Android devices?

The seek method only redirects users to the position specified in the loadByUrl operation. However, the video cannot be played. 
If you call the play method on iOS devices, the video is played from the beginning.
Videos played in full-screen mode on iOS devices are forced to be played in the built-in player.

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

    Call the seek method in the play and canplay events. The seek method may not take effect on specific browsers. In this case, call the seek method in the first timeupdate event.
     player.on('canplay',function(){
                player.seek(20)
              })
    You cannot resolve the issue where videos played in full-screen mode on iOS devices are hijacked by the built-in player.

What do I do if the previous video is still being played after the video source is switched?

Problem description: In Windows 10, the loadByUrl operation in ApsaraVideo Player SDK for Web 2.9.11 is abnormal in compatibility mode in 360 Secure Browser. After the video source is switched, the previous video is still being played.

Cause: Browser compatibility.

Solution: Use ApsaraVideo Player SDK for Web 2.9.19 or later.

How do I obtain the playback time at regular intervals?

You can call the getCurrentTime method every second by using a timer to obtain the playback time. Clear the timer when the video playback is paused, fails, or 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();
 });

How do I disable the progress bar?

  • For the HTML5 player, remove the code related to the progress bar. This way, the progress bar is not displayed and you cannot drag the progress handle on the progress bar. Specify the skinLayout parameter. You can delete the controlBar attribute or the progress parameter of the controlBar attribute. Sample code:
    Note If you want to disable the seeking feature and retain the progress bar, you must configure the parameters at the service layer. 
    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},
      ]
    }
  ]
  • For the Flash player, specify the disableSeek parameter. For more information, see API operations.

How do I enable the autoplay feature in WeChat for iOS? 

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {            
wx.config({
                // The configuration information. The wx.ready method is available even if the configuration information is invalid.
                debug: false,
                appId: '',
                timestamp: 1,
                nonceStr: '',
                signature: '',
                jsApiList: []
            });
            wx.ready(function() {
                var video=$(player.el()).find('video')[0];
                video.play();
            });
    };
    // Enable video autoplay on iOS devices.
    autoPlay();
</script>