流媒体技术世界——分享技术,增值服务
如何使用Wowza的HTML5播放器Wowza Player
Wowza Media Systems™ 公司提供了一个新的产品,Wowza™ Player, 这是一个轻量级的支持HLS协议的HTML5播放器。 Wowza Player 也支持在不支持HTML5的旧式浏览器上采用FLash技术进行视频播放。Wowza还提供了一个非常简易便捷的Web工具,它可以生成播放器嵌入页面,简化了Wowza Player 的配置和自定义。

注意: 需要Wowza Streaming Engine 4.5.0 (及以上版本)的支持。

大纲


获得 Wowza Player
Wowza Player 用户界面介绍
使用 Wowza Player 的快捷键
使用Wowza Player Builder创建一个自定义的Wowza Player
Wowza Player Builder的配置参考
针对Flash播放的配置
Wowza Player上字符的本地化设置

获得Wowza Player


如果你已经有一个Wowza官网上的注册账户,可以在Wowza Player 页面登录,如果你是第一次登录这个页面,请阅读Wowza的用户协议的文档,在点击Sign In.

如果你的注册商户上已经有了一个Wowza Streaming Engine 软件的License或者Wowza Streaming Cloud™ live streaming service, 你会被引导到Wowza Player Builder 页面,在这里你可以生成Wowza Player的页面嵌入代码.

如果你还没有在Wowza官网上注册过账户,请先在Get Wowza Player 页面,填写注册信息,然后点击Sign Up注册一个账户。

注意:
  • 如果你已经申请了一个Wowza Streaming Cloud 试用账户或购买了Wowza Streaming Cloud 的套餐计划,你也可以自动获得Wowza Player。你只需要用Wowza Streaming Cloud服务的Wowza 账户登录Wowza Player Builder 页面即可。

  • 如果你有多个Wowza Player授权,他们会列在 Choose your license key中,供您选择。

Wowza Player 用户界面介绍


在Wowza Player 用户界面的顶部包括有一个Logo水印、标题和描述 在用户界面的底部有一个播放的进度条,显示了已经播放的时长,还有一个暂停、播放、最大化的控制按钮。

Wowza Player

控制条上的功能 图标 描述
播放/暂停 wowza player 启动或暂停对视频的播放
快速回退 wowza player 回退视频相应的秒数,默认是30秒.
音量/静音 wowza player 调整音量和静音
全屏 wowza player 让播放界面全屏显示
码率选择 wowza player 选择不同码率的视频
回到直播当前时间 wowza player 返回直播当前时间点

使用Wowza Player的快捷键


如果在当前浏览器内,你的控制焦点在Wowza播放器上,那么你可以用下面的快捷键来控制播放行为。

对应的播放行为 按下面的按键
播放/暂停 空格/回车
增加/降低音量10个百分点 上/下箭头
回退/前进 15秒 左/游箭头
静音/启用音量 M键
启用/禁用全屏 F键
跳转到对应百分比时间戳的位置
例如,按4会跳转到一个100秒的视频的第40秒
(0-9)的数字

注意:
  • 用左右箭头和数字键做回退或前进,只针对VOD点播业务和DVR业务

  • 键盘快捷方式只针对HTML5 Wowza Player。它们无法在Flash中使用。

使用Wowza Player Builder创建一个自定义的Wowza Player


wowza player

  1. 登录进入Wowza Player Builder webpage. 如果你有多个Wowza Player的授权,在Stream Source Information,在Choose your license key中选择一个Key

    注意:大部分用户都只有一个Wowza Player的key。
  2. 在Player Builder的Stream Source Informationtab中,在Stream source (HLS)输入Apple HLS的播放URL,例如:

    点播URL: http://[wowza-ip-address]:1935/vod/mp4:sample.mp4/playlist.m3u8

    直播URL: http://[wowza-ip-address]:1935/live/myStream/playlist.m3u8


  3. 做好配置之后,点击Update Preview

  4. 要想将播放器嵌入到你的HTML页面中,点击Get Embed Code, 然后拷贝下面的代码:

    1. wowzaplayer.min.js文件嵌入在你的页面中,拷贝下面然后放在你的Html页面的HEAD部分
      <script type="text/javascript" src="//player.wowza.com/player/latest/wowzaplayer.min.js"></script>
      注意:要使用具体某个版本的Wowza Player,将latest 替换为 [version-number]-[build-number]格式某个版本号即可。
    2. 创建HTML元素,拷贝如下代码放入Boby中
      <div id="playerElement" style="width:100%; height:0; padding:0 0 56.25% 0"></div>
      这里的长宽大小会使用你在Stream Source InformationSize的设置

    3. 要将播放器嵌入到你的页面中,拷贝下面得代码进入BODY中playerElement的后面。 下面的代码包括所有VOD点播的配置,以点播sample.mp4文件为例.
      <script type="text/javascript">
      WowzaPlayer.create('playerElement',
          {
          "license":"[wowza-player-license-key]",
          "title":"My%20Wowza%20Player%20Video",
          "description":"This%20is%20my%20Wowza%20Player%20Video%20description.",
          "sourceURL":"https%3A%2F%2F%5Bwowza-ip-address%5D%3A1935%2Fvod%2Fmp4%3Asample.mp4%2Fplaylist.m3u8",
          "autoPlay":false,
          "volume":"75",
          "mute":false,
          "loop":false,
          "audioOnly":false,
          "uiShowQuickRewind":true,
          "uiQuickRewindSeconds":"30"
          }
      );
      </script>
      其中[wowza-player-license-key]是你的Wowza Player 的授权码。

    下面的展示了一个例子页面中需要的所有的代码
    <HTML>
    <HEAD>
    	<title>My Wowza Player Video</title>
    	<script type="text/javascript" src="//player.wowza.com/player/latest/wowzaplayer.min.js"></script>
    </HEAD>
    
    <BODY>
    
    	<div id="playerElement" style="width:100%; height:0; padding:0 0 56.25% 0"></div>
    
    	<script type="text/javascript">
    	WowzaPlayer.create('playerElement',
    		{
    		"license":"[wowza-player-license-key]",
    		"title":"My%20Wowza%20Player%20Video",
    		"description":"This%20is%20my%20Wowza%20Player%20Video%20description.",
    		"sourceURL":"https%3A%2F%2F%5Bwowza-ip-address%5D%3A1935%2Fvod%2Fmp4%3Asample.mp4%2Fplaylist.m3u8",
    		"autoPlay":false,
    		"volume":"75",
    		"mute":false,
    		"loop":false,
    		"audioOnly":false,
    		"uiShowQuickRewind":true,
    		"uiQuickRewindSeconds":"30"
    		}
    	);
    	</script>
    <BODY>
    </HTML>

Wowza Player Builder的配置参考

下面是关于Wowza Player Builder的配置参考

参数 JSON notation 描述
Update Preview N/A 在右侧的页面中刷新播放器
Stream URL (HLS) sourceURL HLS播放URL
纯音频流 N/A 使用纯音频播放.
Title title 在左上角显示标题
Description description 当用户点击视频的Title时,显示一个描述,它不适用于纯音频的流.
Size width, height (div 元素中的宽和高) 要了解更多,请参考配置Wowza Player的视频宽高尺寸.
Autoplay autoPlay 是否在页面加载时无须点击自动播放
Loop loop 循环播放
Start muted mute 启用静音
Starting volume volume 设置音量,你也可以在代码中调整,默认是总音量的75%,有效值是0到100.
Display images before the video starts and after video ends posterFrameURL, endPosterFrameURL 选择Display image before the video starts and after video ends在视频播放前显示一个图片(类似于海报图),并播放完毕或停止时再显示一个图片。你可以设置两张不同的JPG或PNG图片,但这个图片不适用于纯音频流
Image Scaling Mode uiPosterFrameFillMode 选择fit,可以让图片拉伸,让长的一边适应播放界面,(由于比例的问题,可能会显示黑色的边).

选择fill,可以让图片拉伸,让短的一变适应播放界面,(由于比例的问题,可能会显示黑色的边).

图片的宽和高会按比例拉伸。
Show Quick Rewind uiShowQuickRewind
uiQuickRewindSeconds
Quick Rewind button 嵌入到播放器的控制条上。默认情况下,每次按30秒倒退(可以自定义).
Show Duration (versus Time Remaining) uiShowDurationVsTimeRemaining 在进度条上显示已经播放的时长。清空复选框,在进度条左侧显示还剩余的时长.
Show Bitrate Selector uiShowBitrateSelector 在控制条上添加码率选择的按钮。这可以让用户选择期望的码率的视频流。关于多码率自适应,请参考How to customize video quality choices for adaptive bitrate streams in Wowza Player.
Show Full Screen uiShowFullscreen 选择是否在播放器界面中启用全屏功能.

配置 Wowza Player 视频的宽高尺寸


Select Responsive under Widescreen or Standard to make the player resize itself to fit the webpage or container it's in while maintaining the selected aspect ratio. Black bars are added to fill empty space if the size of the video differs from the size of the player. 如果使用了Responsive, set the Max width to restrict the maximum size to which the player can be stretched.

选择Custom 输入一个自定义的宽和高。注意Wowza Player 可能无法播放宽度Width小于320px的视频.

可用的 Widescreen 预设的大小: 1080p (1920x1080), 768p (1366x768), 720p (1280x720), WSVGA (1024x600), PAL (1024x576), VGA (640x360), QVGA (320x180)

可用 Standard 预设的大小: 1080i (1440x1080), 720p 720p (960x720), VGA (640x480), QVGA (320x240)

针对Flash播放的配置

下面是针对Flash播放的相关配置参数,在Player Builder的Stream Source InformationPlayer Optionstab 中没有这些参数的设置。

Property Type Description
license String Wowza Player的授权码.
uiBackgroundColor String 设置背景颜色,RGB形式。默认值为#000000 (黑色).
flashWmode String 设置Flash视频的窗口模式(Window Mode)包括transparency, layering, positioning, 以及在浏览器中呈现。可选的指包括windowdirectopaquetransparent以及 gpu。 默认值是direct.
注意:direct 选项,在Firefox浏览器中与Bootstrap modal中的Flash objects不兼容。你需要用opaquetransparent来代替。
flashQuality String 设置Flash视频的质量。可选的值包括lowautolowautohighmediumhigh以及 best. 默认值high.
useHardwareDecoding Boolean 用硬件显卡解码,这样可以给CPU去除一些负担,默认是true。这个在某些平台、浏览器上、或者当启用flashWmode时可能不好使。
startTime Integer 时长,单位:毫秒。播放的起始位置。设置为0从开始位置开始播放
endTime Integer 时长,单位:毫秒。播放的结束位置。设置为-1时表示没有结束时间。
abrAutoSwitching Boolean 在手动选择码率和自动选择码率之间切换。默认是true, 这会为你的用户选择质量最好的视频流。
debugLevel String 设置输出到浏览器控制台中的错误日志级别。OFF, ERROR, WARN, INFO, DEBUG. 默认是INFO.
useFlash Boolean 设置为true来强制使用Flash播放器而不是HTML5播放器
abrStartingBitrate String 设置播放器开始播放时如何动态选择一个码率(first, lowest, 或 highest). 默认值是first.

要了解更多这些设置,请参考Apply OBJECT and EMBED tag attributes in Adobe Flash Professional.

Wowza Player的字符本地化

你可以为Wowza Player上显示的字符做本地化设置。这些配置是Player Builder界面上没有的。

参数名 默认值 描述
stringAuto Auto 在多码率自适应流的场景下,代表自动选择码率的标签
stringBuffering Buffering... 当视频流正在缓冲时,显示的提示字符
stringCountdownTimerLabel Time until show 直播节目开始前的提示语
stringErrorStreamUnavailable Stream Unavailable 当遇到视频源不存在等问题时(例如Url不正确),显示的错误提示
stringErrorCORSStreamUnavailable Stream unavailable. Check cross-origin policy 当加载视频遇到CORS错误时,显示的错误提示。这意味着Wowza Streaming Engine 的HLS没有启用Cross-Origin 头。要了解更多,请阅读对于HTTP流如何启用跨域资源共享(CORS)?.
stringLiveLabel LIVE 在控制条上提示用户这是一个直播流.
stringLiveEventEnded This live event has ended. 提示直播节目已经结束
stringLiveSeekAlt Seek to LIVE 当在播放NDVR流时,鼠标停留在播放器上时,显示的提示


匿名用户
评论

我们的地址


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


邮编:100024

关于我们


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


官网:www.ttstream.com

联系我们


王经理:phone


柳经理:phone

京ICP备14033868号-2