This topic provides answers to commonly asked questions about ApsaraVideo Player for web.
How do I choose a proper player?
ApsaraVideo Player supports the HTML5 player, Flash player, and adaptive streaming mode. We recommend that you use the adaptive streaming mode so that ApsaraVideo Player selects the most suitable player based on the type of your terminal and browser and the streaming protocol. For more information, see online Settings.
How do I enable the HTML5 player?
- Include the link of the JS file for enabling the HTML5 player in your HTML file.
- Enable the adaptive streaming mode and set the useh5Prism parameter to true.
How do I enable the Flash player?
- Include the link of the JS file for enabling the Flash player in your HTML file.
- Enable the adaptive streaming mode and set the useFlashPrism parameter to true.
What is adaptive streaming?
- If the useFlashPrism parameter is set to true, and the Real-Time Messaging Protocol (RTMP) or HTTP-FLV protocol is used, the Flash player is used.
- The HTML5 player is used to play videos on mobile devices.
- If the useH5Prism parameter is set to true, the HTML5 player is used.
- The HTML5 player is used to play MP4 videos on PCs.
- If the web browser on your PC supports playback of .m3u8 videos, with or without the ApsaraVideo Player plug-in installed, the HTML5 player is used. Otherwise, the Flash player is used.
- In other scenarios, the HTML5 player is used.
Which browsers support the Flash player?
What can I do if I cannot drag the slider on the progress bar to a specified point in time for an MP4 or FLV video in the Flash player?
- Index information, such as the timestamp of an MP4 video and meta information of an FLV video, must be contained in the file header. After the player parses the index information, the player obtains data points of the time range specified by the drag operation and sends a request containing the time range information to CDN.
- CDN supports requests that contain 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 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 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() {
if(player)// The ApsaraVideo Player object that is created.
{
player.play();
}
});
};
// Enable video autoplay on iOS mobile phones.
autoPlay();
</script>
How do I specify the start time for video playback in a player?
- For the HTML5 player, use the following sample code:
var seeked = false; player.on('canplaythrough',function (e) { if(! seeked) { seeked = true; player.seek(100); } });
- For the Flash player, use the following sample code:
var seeked = false; player.on('loadedmetadata',function (e) { if(! seeked) { seeked = true; player.seek(20); } });
How do I disable 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},
]
}
]
What can I do if the video ID and playAuth change?
- You can call the
replayByVidAndPlayAuth
method to replace the existing HTML5 player. Example:player.replayByVidAndPlayAuth(newVid, newPlayAuth)
- You must destroy the existing Flash player and create a new one based on the new video
ID and playAuth. Example:
// Destroy the existing player. FlashPlayer.dispose(); $('#FlashPlayer').empty(); // Create a player. FlashPlayer = new Aliplayer({ id: 'FlashPlayer', autoplay: true, playsinline:true, vid: newVid, playauth: newPlayAuth, useFlashPrism:true });
How do I obtain the playback time at regular intervals?
var timer = null;
function getTime()
{
var currentTime = player.getCurrentTime();
//to do
timer = setTimeout(getTime,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 adjust the size and location of the play button in the HTML5 player?
- Rewrite the CSS code for the play button. The following sample code narrows the button
size to a half:
.prism-player .prism-big-play-btn { width: 45px; height: 45px; background-size: 128px 256px; }
- To adjust the location of the play button, set the values of the x and y fields in
the bigPlayButton parameter of the skinLayout attributes. 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 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 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?
<meta http-equiv="x-ua-compatible" content="IE=edge" >
What can I do if I receive a message indicating a cross-domain error when the Flash player plays streams based on M3U8 playlists?
<? 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 can I do if the Flash player cannot display the thumbnail?
- Check whether the thumbnail URL that is entered in the cover field is valid.
- Check whether a valid crossdomain.xml file exists in the root directory of the domain to which the thumbnail URL entered in the cover field belongs.