All Products
Search
Document Center

ApsaraVideo VOD:FAQ about ApsaraVideo Player for Web

Last Updated:Feb 18, 2024

This topic provides answers to some commonly 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 JavaScript file to enable the HTML5 player.

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

 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. 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 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.常见问题

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 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 by 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.image.png

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

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

<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(() => {
        // Initialize the player after the SDK is loaded.
				let player = new Aliplayer({
					id: "url-player-test",
					source: "//player.alicdn.com/video/aliyunmedia.mp4",
					width: "100%",
					height: "100%",
					autoplay: true,
					rePlay: false,
					playsinline: true,
					preload: true,
					controlBarVisibility: "always",
					keyShortCuts: false,
					showBuffer: true,
				}, function (player) {
				});
				player.one('canplay', function(){
					console.log('canplay', player.tag);
					player.tag.play();
				});
			}).catch((e) => {
				console.log("Loading of ApsaraVideo Player SDK failed.", e);
			});
		},
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
        /** 
         * Note: We recommend that you do not assign player data to the data property in Vue2. Otherwise, specific features may be unavailable in ApsaraVideo Player.
         * Do not specify player = new AliPlayer().
         * 
         * We recommend that you specify this.player = new AliPlayer() after the player instance is created or mounted.
        */
			}
		},
		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.19.0/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.19.0/skins/default/aliplayer-min.css';
					document.body.appendChild(l_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?

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

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