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. If ApsaraVideo Player SDK for Web is integrated, the player is automatically matched. For more information about how to integrate ApsaraVideo Player SDK for Web, see Quick integration. 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.
  • We recommend that you use the HTML5 player to play videos transmitted over protocols other than RTMP.
Note When you integrate ApsaraVideo Player for Web, you can set the useFlashPrism parameter to specify the player that you want to use. useFlashPrism=true indicates the Flash player and useFlashPrism=true indicates the HTML5 player.

HTML5 player issues

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.

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 of 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.
  • Enable Time-based FLV 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
        });

Other issues

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

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

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>

The live comment feature cannot be used when videos are played in the 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);
        }

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

loadByUrl cannot be called on iOS or Android devices

The seek method redirects users to the video specified by loadByUrl. However, the video cannot be played. 
If you call the play method on iOS devices, the video is replayed 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.

Videos cannot be played in the 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 the landscape mode after the user enables full-screen mode.