流媒体技术世界——分享技术,增值服务
JW Palyer 6如何与Wowza Media Server配合使用?
这篇文章介绍了JW palyer 6如何与Wowza Stream Engine 4配合使用. www.ttstream.com

配置


要使用JW Player 6,首先要从longtailvideo.com下载 JW Player 6,然后完成安装。安装过程中会生成一个jwplayer.key 文件,当你用JW Player 6播放Apple HTTP Live Streaming (Apple HLS/Cupertino)时,你会需要它。

当你将JW Palyer 6播放器文件拷贝到你的WEB服务器后,你可以根据下面的例子从Wowza Media Server播放流媒体。这些例子将从你的Web根目录下的jwplayer路径下加载JW Player 6。

RTMP 和 HLS 流媒体
Code:
<html>
<head>
<title>JW Player 6</title>

<script type="text/javascript" src="/jwplayer/jwplayer.js" ></script>
<script>jwplayer.key="[jwplayer-key]"</script>
</head>

<body>

<div id="player">Loading the player...</div>

<script type="text/javascript">
    jwplayer("player").setup({
   	sources: [{
            file: "rtmp://[wowza-address]:1935/vod/mp4:sample.mp4"
        },{
            file: "http://[wowza-address]:1935/vod/sample.mp4/playlist.m3u8"
        }],
        rtmp: {
        bufferlength: 3
    },
    });
</script>
</body>
</html>
RTMP Dynamic Streaming and HLS ABR

注意:下面例子中的播放列表源URLhttp://[wowza-address]:1935/vod/smil:sample.smil/jwplayer.smil将服务端的SMIL文件转变为JW Player支持的客户端动态流播放列表。 要了解更多这个技术的细节,请阅读 如何使用JW Player从Wowza Media Server播放码率自适应流媒体

Code:
<html>
<head>
<title>JW Player 6</title>

<script type="text/javascript" src="/jwplayer/jwplayer.js" ></script>
<script>jwplayer.key="[jwplayer-key]"</script>
</head>

<body>

<div id="player">Loading the player...</div>
 
<script type="text/javascript">

jwplayer("player").setup({
    playlist: [{
        sources: [
            { file: "http://[wowza-address]:1935/vod/smil:sample.smil/jwplayer.smil", },
        ],
    }],
    sources: [{
            file: "http://[wowza-address]:1935/vod/smil:sample.smil/playlist.m3u8"
        }]
});
</script>
</body>
</html>
下面的例子在页面中显示了一个RTMP流的metadata信息(更多细节,请阅读JW Player JavaScript API Reference。)
Code:
<html>
<head>
<title>JW Player 6</title>

<script type="text/javascript" src="/jwplayer/jwplayer.js" ></script>
<script>jwplayer.key="[jwplayer-key]"</script>
</head>

<body>

<div id="player">Loading the player...</div>
<script type="text/javascript" src="/jwplayer/jwplayer.js" ></script>
<script type="text/javascript">
    jwplayer("player").setup({
   	sources: [{
            file: "rtmp://localhost/vod/mp4:sample.mp4"
        },]
    });

    jwplayer("player").onMeta( function(event){
	    for (var key in event) {
		   var obj = event[key];
		   for (var prop in obj) {
		      if (isNaN(prop))
		      {
			      document.getElementById("status").innerHTML += prop + " = " + obj[prop] + "<BR>"

			      if (prop=="trackinfo")
			      {
			      	var trackInfo = obj[prop]
			      	for (var trackProp in trackInfo)
			      	{
			      		var info = trackInfo[trackProp];
			      		for (var p2 in info)
			      		{
			      			document.getElementById("status").innerHTML += "TrackInfo: " + p2 + " = " + p2[info] + "<BR>"
			      		}

			      	}
			      }
			  }

		   }
}
});

</script>
<div id="status"></div>

</body>
</html>


匿名用户
评论

我们的地址


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


邮编:100024

关于我们


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


官网:www.ttstream.com

联系我们


王经理:phone


柳经理:phone

京ICP备14033868号-2