Deploy Player -Web-SDK-Play Audio and Video
This chapter takes the version Web SDK v2.1.1 player as an example, and it is suitable for storing source video files in BOS, VOD and HLS/RTMP lives; as for FLV lives, please add configuration parameter 'isLive: true' when initializing the player (calling the setup method).
1.Log in to Baidu AI Cloud official website. - Unregistered, should Register first. - Registered, directly Login.
2.Get AK to be prepared for player authentication.
Player authentication ensures that you can normally use different features of the player before getting the official authorization. Baidu AI Cloud, by verifying AK method to sign for authorization. Without authorization, the warning information may occur when playing.
3.Build a Web server
Here, we take Apache server built on Ubuntu operating system as an example.
# apt-get install apache2 //Install apache
# vim /etc/apache2/apache2.conf //Add ServerName localhost
# service apache2 restart //Enable apache service
# chmod a+w /var/www/ //Grant the current user the privilege to write 4.Switch to the website root directory and download the latest Player Web SDK，compress and install after creating the deployment directory.
# cd /var/www/html/ //Switch to the root directory of the website
# wget https://sdk.bce.baidu.com/media-sdk/Baidu-T5Player-SDK-Web-v2.1.1.zip
# unzip Baidu-T5Player-SDK-Web-v2.1.1.zip 5.Create an HTML playback page
# vi player.html 6.Add AK and playback source to complete configuring the playback page. There are two configuration methods as follows:
- Add Web SDK to Web page
The code example is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple html example</title>
</head>
<body>
<div id="playercontainer"></div>
<script type="text/javascript" src="./Baidu-T5Player-SDK-Web-v2.1.1/player/cyberplayer.js"></script>
<script type="text/javascript">
var player = cyberplayer("playercontainer").setup({
width : 580,
height : 433,
backcolor : "#FFFFFF",
stretching : "uniform",
file : "<Media_Source_In_BOS_Bucket>",
ak : "<AK>",
autoStart : true,
repeat : false,
volume : 100,
controls : "over"
});
</script>
</body>
</html>
- JS parameter calling Web SDK
The code example is as follows:
CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple html example</title>
</head>
<body>
<div id="aaa">
<script type="text/javascript" src="./Baidu-T5Player-SDK-Web-v2.1.1/player/cyberplayer.js?file=<Media_Source_In_BOS_Bucket>&width=680&autostart=true&volume=60&height=400&ak=<AK>&stretching=uniform&controls=true"></script>
</div>
</body>
</html> 7.Open the browser and input <WebServer>/player.html to play the video and audio.
The player calls and integrates through Javascript, and the player SDK contains two rendering engines: Flash rendering engine and HTML5 rendering engine, SDK can automatically match the suitable player according to the current browser information. When both players are supported, SDK givers preference to HTML5.