部署播放器-Web-SDK-并播放音视频
所有文档

          音视频处理 MCT

          部署播放器-Web-SDK-并播放音视频

          本章以播放器 Web SDK v2.1.1版本为例,适用于源视频文件存于BOSVOD及HLS/RTMP直播等场景,对于FLV直播,请您在初始化播放器(即调用setup方法)时,添加配置参数'isLive: true'。

          1. 登录百度智能云官网

          2. 获取AK 为播放器鉴权做准备。

          播放器鉴权将保证您在正式授权的前提下正常使用播放器的各项功能。百度智能云通过验证AK 的方式进行签名授权。若未经授权,播放过程中会显示警告消息。

          1. 搭建 Web 服务器。

            此处以 Ubuntu 操作系统上搭建 Apache 服务器为例。

            # apt-get install apache2        //安装apache
            
            # vim /etc/apache2/apache2.conf  //添加 ServerName localhost
            
            # service apache2 restart        //启动apache服务
            
            # chmod a+w /var/www/            //赋予当前用户写权限
          2. 切换到网站根目录并下载最新的播放器 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
          3. 新建HTML播放页面。

            # vi player.html
          4. 添加 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_BOS_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_BOS_Bucket>&width=680&autostart=true&volume=60&height=400&ak=<AK>&stretching=uniform&controls=true"></script>
                </div>
                </body>
                </html>
          5. 打开浏览器输入<WebServer>/player.html播放音视频。

            播放器通过Javascript进行调用和集成,播放器SDK包含两个渲染引擎:Flash渲染引擎和HTML5渲染引擎,SDK能根据当前浏览器信息自动适配合适的播放器。当两种播放器都支持的情况下,SDK优先选择HTML5。

          上一篇
          播放器-Web-SDK-简介
          下一篇
          播放器-Web-SDK-开发指南