ApsaraVideo VOD:FAQ about ApsaraVideo Player SDK 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.

HTML5 player issues

How do I enable the HTML5 player?

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

 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: Sample code:

   .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. Sample code:

  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. If the video is already paused, you can press the button to play the video.

What do I do if a cross-origin error occurs when I use the HTML5 player to play FLV or M3U8 files?

If the error message "Access is denied for this document" appears or an "Access-Control-Allow-Origin" related error occurs, you need to enable CORS for your playback domain. For more information, see Configure CORS.

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?

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.

What do I do if the Referer header is not included in the request when I use the HTML5 player to play FLV videos?

1. Check whether you have specified that Referer headers can be included in the requests on your website. For more information, see Referrer-Policy. When players initiate requests, the Referer policy that you specified for the website is preferentially used.

2. If you have specified that Referer headers can be included in the requests on your website but no Referer header is included in the request, configure the enableWorker: false parameter in the player. If you have enabled ACL-based access control by using Referer but no Referer header is included in the request, video playback may be prohibited.

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 that contains 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. Sample code:

// 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 CORS file for the player to implement CORS. You must add the CORS permissions to the crossdomain.xml file and add the file to the root directory of the domain to which the playback 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 by 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 specified in the cover field.

Video playback issues due to browser hijacking

In most cases, the built-in players of browsers are used to play videos on websites. The playback configurations of browsers have the highest priority. Browser hijacking occurs when the built-in player of a browser is used for playback instead of the video component of ApsaraVideo Player SDK. In this case, you cannot use JavaScript or CSS files to modify playback configurations and the following issues may occur: the player view is different from the specified view, specific features of the player cannot be used, an unexpected UI or ad appears during playback, and videos are forcibly played in full-screen mode.

In most cases, browser hijacking occurs in browsers on mobile devices, such as WeChat, UC Browser, and QQ Browser. The following section provides answers to some frequently asked questions about browser hijacking:

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.

Solution: When videos are played in full-screen mode on iOS devices, the native UI of iOS is used instead of the video component of the SDK. In this case, you cannot modify the UI or display live comments on the video. To solve this issue, 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.

Other issues

How do I remove the default thumbnail of WebView?

Problem description: On specific Android phones, if you do not specify the poster property for the <video> tag, a default thumbnail is displayed. The following figure shows the default thumbnail.

Solution: If you want to remove the default thumbnail, specify an invalid poster property for the <video> tag to override the default thumbnail configuration. Sample code:

extraInfo: { poster: 'noposter' } // The information contained in the player parameter extraInfo is passed to the <video> tag.

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 V2.14.0 or later supports the playback of H.265 video streams. To play H.265 video streams, apply for a license and configure the parameters to enable the H.265 feature. For more information, see Play H.265 and H.266 videos.

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 display the content in the highest available mode in Internet Explorer?

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

How do I enable autoplay in full-screen mode?

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

How do I integrate ApsaraVideo Player SDK for Web to uni-app?

Sample code:

<template>
  <view class="container">
    <p>VUE2 Demo</p>
    <div id="url-player-test"></div>
  </view>
</template>
<script>
  export default {
    mounted() {
      // Use the script and link tags to add the CSS file and ApsaraVideo Player SDK for Web package to uni-app.
      this.loadWebPlayerSDK().then(() => {
        // To use custom components, uncomment the following line:
        // this.loadComponent().then(() => {
        let player = new Aliplayer({
          id: "url-player-test",
          source: "//player.alicdn.com/video/aliyunmedia.mp4",
          width: "100%",
          height: "100%",
        }, function (player) {
        });
        player.one('canplay', function () {
          console.log('canplay', player.tag);
          player.tag.play();
        });
        // }).catch((e) => { console.log("Component loading failed", e) })
      }).catch((e) => {
        console.log("Loading of ApsaraVideo Player SDK failed.", e);
      });
    },
    data() {
      return {}
    },
    methods: {
      loadWebPlayerSDK() {
        return new Promise((resolve, reject) => {
          const s_tag = document.createElement('script'); // Add the .js file of the player.
          s_tag.type = 'text/javascript';
          s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
          s_tag.charset = 'utf-8';
          s_tag.onload = () => {
            resolve();
          }
          document.body.appendChild(s_tag);
          const l_tag = document.createElement('link'); // Add the .css file of the player.
          l_tag.rel = 'stylesheet';
          l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
          document.body.appendChild(l_tag);
        });
      },
      loadComponent() {
        return new Promise((resolve, reject) => {
          const s_tag = document.createElement('script');
          s_tag.type = 'text/javascript';
          // Download the component .js file and store the file in the /static/ directory of the project.
          // Download URL: https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
          s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
          s_tag.charset = 'utf-8';
          s_tag.onload = () => {
            resolve();
          }
          document.body.appendChild(s_tag);
        });
      }
    }
  }
</script>
<style>
  .container {
    padding: 20px;
    font-size: 14px;
    height: 800px;
  }
</style>

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

 // 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 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 for 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, listen for the seeking event on the client side. For more information, see Disable seeking on the progress bar.

  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?

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

How do I get to the latest clip after a live stream is resumed?

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.