All Products
Search
Document Center

FAQ

Last Updated: Sep 06, 2019

How do I choose a proper playback format?

ApsaraVideo Player supports playback in HTML5, Flash, or adaptive streaming mode. We recommend that you use the adaptive streaming mode so that ApsaraVideo Player selects the most suitable playback technology according to the terminal type, browser type, and streaming protocol.

For more information, see the configurations on the Online Settings page.

How do I enable HTML5?

To enable HTML5, perform either of the following operations:

  • Include the link to the JavaScript file for enabling HTML5 in your HTML.

  • Enable the adaptive streaming mode and set the useH5Prism parameter to true.

How do I enable Flash?

To enable Flash, perform either of the following operations:

  • Include the link to the JavaScript file for enabling Flash in your HTML.

  • Enable the adaptive streaming mode and set the useFlashPrism parameter to true.

What is adaptive streaming?

In adaptive streaming mode, ApsaraVideo Player selects the most suitable playback technology according to the terminal type, browser type, and streaming protocol. The basic principle of adaptive streaming is as follows:

HTML5 enjoys the highest priority. That is, HTML5, other than Flash, is used when applicable, unless you specify the Flash technology for playback.

  • When the useFlashPrism parameter is set to true, and the Real-Time Messaging Protocol (RTMP) or HTTP-FLV protocol is used, the Flash technology is used.

  • HTML5 is used to play videos on mobile devices.

  • When the useH5Prism parameter is set to true, the HTML5 technology is used.

  • HTML5 is used to play MP4 videos on PC-based platforms.

  • If the web browser on your PC supports playback of M3U8 videos, with or without the ApsaraVideo Player plug-in installed, the HTML5 technology is used. Otherwise, the Flash technology is used.

  • For scenarios other than the above, the HTML5 technology is used.

Which browsers support the Flash technology?

All browsers support playback by Flash. Flash may be disabled by some browsers and need to be enabled manually. For more information about how to enable Flash, see the following documents:

I cannot drag the slider on the progress bar to a specified time point for an MP4 or FLV video in the Flash player. What can I do?

To drag the slider on the progress bar to a specified time point for an MP4 or FLV video in the Flash player, ensure that the video data of the specified time point can be obtained from Content Delivery Network (CDN). When the slider on the progress bar is dragged, the player sends a request containing the time range information to CDN. After receiving such a request, CDN returns the corresponding video data. To implement this feature, the following two conditions must be met:

  1. Index information, for example, the timestamp of an MP4 video and meta information of an FLV video, must be contained in the file header. After parsing the index information, the player can obtain data points of the time range specified by the drag operation and send a request containing the time range information to CDN.

  2. CDN supports requests containing the time range or byte range information.For more information about how to enable this feature in the CDN console, see Configure video seeking.

How do I disable automatic full-screen playback in WeChat for Android?

If you use an Android mobile phone, a video is played in full-screen mode in the Tencent browser or WeChat. By default, the Tencent browser hijacks the video tag to use the default player to play the video. In this case, the Dom element is overwritten. You cannot modify this default configuration of the Tencent browser. However, you can enable the immersive mode to avoid Dom element overwriting. For more information, see How do I enable the immersive mode for the HTML5 player.

How do I enable the autoplay feature in WeChat?

  1. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  2. <script>
  3. function autoPlay() {
  4. wx.config({
  5. // Configuration. The wx.ready method is available even when the configuration information is incorrect.
  6. debug: false,
  7. appId: '',
  8. timestamp: 1,
  9. nonceStr: '',
  10. signature: '',
  11. jsApiList: []
  12. });
  13. wx.ready(function() {
  14. var video=$(player.el()).find('video')[0];
  15. video.play();
  16. });
  17. };
  18. // Enable video autoplay on iOS mobile phones.
  19. autoPlay();
  20. </script>

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

In the HMTL5 player:

  1. var seeked = false;
  2. player.on('canplaythrough',function (e) {
  3. if(!seeked)
  4. {
  5. seeked = true;
  6. player.seek(100);
  7. }
  8. });

In the Flash player:

  1. var seeked = false;
  2. player.on('loadedmetadata',function (e) {
  3. if(!seeked)
  4. {
  5. seeked = true;
  6. player.seek(20);
  7. }
  8. });

How do I disable the progress bar?

By referring to the settings on the Custom UI
tab on the Online Settings page of ApsaraVideo Player
, customize the skinLayout attribute. Disable the entire control bar or comment out certain items of the control bar, such as the progress bar.

  1. skinLayout: [
  2. {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
  3. {
  4. name: "H5Loading", align: "cc"
  5. },
  6. {
  7. name: "controlBar", align: "blabs", x: 0, y: 0,
  8. children: [
  9. //{name: "progress", align: "tlabs", x: 0, y: 0},
  10. {name: "playButton", align: "tl", x: 15, y: 26},
  11. {name: "timeDisplay", align: "tl", x: 10, y: 24},
  12. {name: "fullScreenButton", align: "tr", x: 20, y: 25},
  13. {name: "volume", align: "tr", x: 20, y: 25},
  14. ]
  15. }
  16. ]

What should I do if the VID and playAuth change?

For the HTML5 player, you can call the replayByVidAndPlayAuth method.

  1. player.replayByVidAndPlayAuth(newVid, newPlayAuth)

For the Flash player, you need to release the existing Flash player and create a new one according to the new VID and playAuth.

  1. // Release the existing player.
  2. flashPlayer.dispose();
  3. $('#flashPlayer').empty();
  4. // Create a new player.
  5. flashPlayer = new Aliplayer({
  6. id: 'flashPlayer',
  7. autoplay: true,
  8. playsinline:true,
  9. vid: newVid,
  10. playauth: newPlayAuth,
  11. useFlashPrism:true
  12. });

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.

  1. var timer = null;
  2. function getTime()
  3. {
  4. var currentTime = player.getCurrentTime();
  5. //to do
  6. timer = setTimeout(getTime,1000);
  7. }
  8. // Clear the timer.
  9. function clear()
  10. {
  11. if(timer)
  12. {
  13. clearTimeout(timer);
  14. timer = null;
  15. }
  16. }
  17. player.on('ended',function (e) {
  18. clear();
  19. });
  20. player.on('pause',function (e) {
  21. clear();
  22. });
  23. player.on('error',function (e) {
  24. clear();
  25. });

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

Rewrite the CSS code for the play button. The following is the sample code for narrowing the button size to a half:

  1. .prism-player .prism-big-play-btn {
  2. width: 45px;
  3. height: 45px;
  4. background-size: 128px 256px;
  5. }

To adjust the location of the play button, set the x and y values of bigPlayButton when setting the skinLayout attribute.

  1. skinLayout: [
  2. {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
  3. {
  4. name: "H5Loading", align: "cc"
  5. },
  6. {
  7. name: "controlBar", align: "blabs", x: 0, y: 0,
  8. children: [
  9. {name: "progress", align: "tlabs", x: 0, y: 0},
  10. {name: "playButton", align: "tl", x: 15, y: 26},
  11. {name: "timeDisplay", align: "tl", x: 10, y: 24},
  12. {name: "fullScreenButton", align: "tr", x: 20, y: 25},
  13. {name: "volume", align: "tr", x: 20, y: 25},
  14. ]
  15. }
  16. ]

How do I disable automatic full-screen playback for my mobile phone?

  • If you use an iOS mobile phone, set the playsinline attribute to true to disable automatic full-screen playback.

  • If you use an Android mobile phone, a video is played in full-screen mode in the Tencent browser or WeChat. By default, the Tencent browser hijacks the video tag to use the default player to play the video. In this case, the Dom element is overwritten. You cannot modify this default configuration of the Tencent browser. However, you can enable the immersive mode to avoid Dom element overwriting. 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 need to enable the highest available mode to display the content in Internet Explorer 10 and earlier. The following is the sample code:

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

The Flash player displays a message indicating a cross-domain error when playing M3U8 videos. What can I do?

You need to add a policy file for the player to implement cross-domain access. That is, you need to add the cross-domain access permission to the crossdomain.xml file and add the file to the root directory of the domain name to which the video playback link belongs.

Assume that the video playback link is http://test1.com/app/test.m3u8. Add the crossdomain.xml file in the http://test1.com/ directory.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <cross-domain-policy>
  3. <allow-access-from domain="*"/>
  4. <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
  5. </cross-domain-policy>

The Flash player cannot display the thumbnail. What can I do?

  • Check whether the thumbnail URL is valid.

  • Check whether there is a valid crossdomain.xml file in the root directory of the domain name to which the thumbnail URL belongs.