流媒体技术世界——分享技术,增值服务
关于Google Shaka播放器的使用介绍
Shaka播放器是Google贡献的一个用JavaScript类库实现的基于HTTP技术的音视频流传输方案,目前支持MPEG-DASH流传输协议。 Shaka播放器支持基于Encrypted Media Extensions(EME) API的内容保护,也支持多个音频和视频轨道以及字幕。 下面介绍了如何用Shaka播放器来播放Wowza Streaming Engine™ 的MPEG-DASH流。 获取更多关于Wowza产品的详细资料

注意:
  • 这篇文章的例子依赖Wowza Streaming Engine 4.2及以上版本,以及最新的Google Shaka播放器,最新版本的Google Chrome.

  • Shaka播放器目前的一些限制:

    • 还不支持字幕和DVR播放

    • 还不能在多个音频轨道之前切换

内容大纲


开始
配置一个直播应用
配置一个点播应用
下载和安装Shaka播放器
配置Shaka播放器来播放MPEG-DASH流
两个播放例子
直播播放例子
点播播放例子

开始


在使用Shaka播放器前,你必须先在Wowza Streaming Engine Manager配置一个直播流媒体应用,并启用MPEG-DASH流传输协议。 在这个环节,你可以用VOD点播应用来准备下面的测试。另外说明一点,Wowza Streaming Engine安装后,默认就带了一个叫做live的直播应用和一个叫做vod的点播应用。

注意: 在Wowza中把应用配置好之后,你可以先用Wowza官网的Wowza Test Players上的Shaka播放器来测试。 (这个测试播放器仅仅用于测试使用)。
获取更多关于Wowza产品的详细资料

配置一个直播应用

下面的例子将指导您如何在Wowza中配置一个直播应用,让Shaka播放器来播放。 这个例子中的应用就是Wowza Streaming Engine安装后默认自带的live应用。

直播应用的配置:

  1. 在Wowza Streaming Engine Manager中,点击页面顶部的Applicationstab菜单

  2. live应用进行配置:

    1. Applications的内容面板,点击live,再点击Edit

      Wowza Streaming Engine

    2. live主界面, 在MPEG-DASH播放类型上打勾,然后点击Save

      Wowza Streaming Engine

  3. 重启application

    Wowza Streaming Engine

配置一个VOD点播应用

下面的例子将指导您如何在Wowza中配置一个VOD点播应用,让Shaka播放器来播放. 这个例子中的应用就是Wowza Streaming Engine安装后默认自带的vod应用。使用的媒体文件是[install-dir]/content/sample.mp4

VOD点播应用的配置:

  1. 在Wowza Streaming Engine Manager中,点击页面顶部的Applicationstab菜单。

  2. 配置vod应用:

    1. Applications 的内容面板,点击vod, 在点击Edit
      Wowza Streaming Engine

    2. vod主界面,在MPEG-DASH播放类型上打勾,然后点击Save

      Wowza Streaming Engine

  3. 重启application

    Wowza Streaming Engine

下载并安装Shaka播放器



注意:你可以在Wowza官网Wowza Test Players页面的Shaka播放器来测试,这个播放器仅仅用于测试使用。
安装Shaka播放器:

  1. 请访问shaka-player project Github repository, 点击页面右侧的Download ZIP,然后解压shaka-player-master.zip文件

  2. To build Shaka Player on Linux or Mac operating systems, run ./build/all.sh from the root folder of the unzipped source code.

    注意:如果你在Linux系统上构建Shaka播放器,你可能还需要其它类库(比如Node.js、Python和Java),具体取决于你现在用的Linux发行版本。
    要构建Windows平台上的Shaka播放器,你先要正确的安装一些需要的类库包,然后在解压后的文件夹目录下运行./build/all.sh

  3. 将播放器部署在Web服务器上

配置Shaka播放器来播放Wowza提供的音视频流


当你将Shaka播放器部署在你的Web服务器上后,你需要将播放器嵌入到你的HTML5页面中。

要将Shaka播放器类库加载到你的WEB页面,请将下面的代码片段拷贝到WEB页面代码的HEAD部分:
<script src="shaka-player.compiled.js"></script>
要在播放器呈现在你的WEB页面中,请将下面的代码片段拷贝到WEB页面代码的BODY部分:
<video id="video" width="640" height="480"
       crossorigin="anonymous" 
       controls>
    Your browser doesn't support HTML5 video.
</video>
要管理和初始化播放器,请将下面的代码片段拷贝到靠近</BODY>标签前的HTML代码中:
<script>
    function initPlayer() {
        // Install polyfills for legacy browser support.
        shaka.polyfill.installAll();

        // Find the Shaka Player video element.
        var video = document.getElementById('video');

        // Construct a Player to wrap around it.
        var player = new shaka.player.Player(video);

        // Attach the player to the window so that it can be easily debugged.
        window.player = player;

        // Listen for errors from the Player.
        player.addEventListener('error', function(event) {
          console.error(event);
          });

        // Construct a DashVideoSource to represent the DASH manifest.
        var mpdUrl = 'http://[wowza-ip-address]:[port]/[application]/[stream-name]/manifest.mpd';
        var estimator = new shaka.util.EWMABandwidthEstimator();
        var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);

        // Load the source into the Player.
        player.load(source);
    }
    document.addEventListener('DOMContentLoaded', initPlayer);
</script>
其中:

  • [wowza-ip-address]:[port] 表示Wowza Streaming Engine的IP地址和端口号(默认是1935).

  • [application]表示Wowza Streaming Engine上的配置的应用名(例如livevod).

  • [stream-name]代表发布到Wowza应用上的流名字

注意:

播放例子


下面的例子是一个最简单的播放配置示例,包括直播和点播播放

直播播放例子

<html>    <head>
        <script src="shaka-player.compiled.js"></script>
    </head>
    <body>
        <video id="video" width="640" height="480"
               crossorigin="anonymous" 
               controls>
            Your browser doesn't support HTML5 video.
        </video>
    </body>
    <script>
        function initPlayer() {
            shaka.polyfill.installAll();

            var video = document.getElementById('video');
            var player = new shaka.player.Player(video);
            window.player = player;

            player.addEventListener('error', function(event) {
              console.error(event);
              });

            var mpdUrl = 'http://[wowza-ip-address]:1935/live/myStream/manifest.mpd';
            var estimator = new shaka.util.EWMABandwidthEstimator();
            var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);

            player.load(source);
        }
        document.addEventListener('DOMContentLoaded', initPlayer);
    </script>
</html>

VOD点播播放例子


<html>
    <head>
        <script src="shaka-player.compiled.js"></script>
    </head>
    <body>
        <video id="video" width="640" height="480"
               crossorigin="anonymous" 
               controls>
            Your browser doesn't support HTML5 video.
        </video>
    </body>
    <script>
        function initPlayer() {
            shaka.polyfill.installAll();

            var video = document.getElementById('video');
            var player = new shaka.player.Player(video);
            window.player = player;

            player.addEventListener('error', function(event) {
              console.error(event);
              });

            var mpdUrl = 'http://[wowza-ip-address]:1935/vod/mp4:sample.mp4/manifest.mpd';
            var estimator = new shaka.util.EWMABandwidthEstimator();
            var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);

            player.load(source);
        }
        document.addEventListener('DOMContentLoaded', initPlayer);
    </script>
</html>
获取更多关于Wowza产品的详细资料
匿名用户
  • 匿名用户 2016-03-04 15:49:25

    做个简单的测试

评论

我们的地址


北京市朝阳区管庄西里建基商务楼423室


邮编:100024

关于我们


北京联方信科信息技术有限责任公司


官网:www.ttstream.com

联系我们


王经理:phone


柳经理:phone

京ICP备14033868号-2