本章以播放器 Web SDK v2.1.1版本为例,适用于源视频文件存于阿里云对象存储、VOD及HLS/RTMP直播等场景,对于FLV直播,请您在初始化播放器(即调用setup方法)时,添加配置参数'isLive: true'。
-
登录阿里云官网。
- 获取AK 为播放器鉴权做准备。
播放器鉴权将保证您在正式授权的前提下正常使用播放器的各项功能。阿里云通过验证AK 的方式进行签名授权。若未经授权,播放过程中会显示警告消息。
-
搭建 Web 服务器。
此处以 Ubuntu 操作系统上搭建 Apache 服务器为例。
# apt-get install apache2 //安装apache# vim /etc/apache2/apache2.conf //添加 ServerName localhost# service apache2 restart //启动apache服务# chmod a+w /var/www/ //赋予当前用户写权限
-
切换到网站根目录并下载最新的播放器 Web SDK,新建部署目录后解压并安装。
# cd /var/www/html///切换到网站根目录 # 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
-
新建HTML播放页面。
# vi player.html
-
添加 AK 及播放源等完成播放页面的配置,配置方法有如下两种:
-
将 Web SDK 添加到 Web 页面
代码示例如下:
<!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>简单的html示例</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_阿里云对象存储_Bucket>",ak : "<AK>",autoStart : true,repeat : false,volume : 100,controls : "over"});</script> </body> </html>
-
JS 参数调用 Web SDK
代码示例如下:
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>简单的html示例</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_阿里云对象存储_Bucket>&width=680&autostart=true&volume=60&height=400&ak=<AK>&stretching=uniform&controls=true"></script> </div> </body> </html>
-
-
打开浏览器输入<WebServer>/player.html播放音视频。
播放器通过Javascript进行调用和集成,播放器SDK包含两个渲染引擎:Flash渲染引擎和HTML5渲染引擎,SDK能根据当前浏览器信息自动适配合适的播放器。当两种播放器都支持的情况下,SDK优先选择HTML5。