Video模块管理多媒体视频相关能力，可用创建视频播放控件，直播推流控件等

最新推荐文章于 2024-08-14 21:14:53 发布

低吟~浅唱

最新推荐文章于 2024-08-14 21:14:53 发布

阅读量1.5k

点赞数

分类专栏：编程小技能文章标签：音视频 javascript

本文链接：https://blog.csdn.net/qq_40575646/article/details/122839131

版权

方法：

createVideoPlayer: 创建VideoPlayer对象
createLivePusher: 创建LivePusher对象
getVideoPlayerById: 查找已经创建的VideoPlayer对象
getLivePusherById: 查找已经创建的LivePusher对象

对象：

VideoPlayer: 视频播放控件对象
VideoPlayerStyles: 视频播放控件参数
VideoPlayerEvents: 视频播放控件事件类型
LivePusher: 直播推流控件对象
LivePusherStyles: 直播推流控件配置选项
LivePusherEvents: 直播推流控件事件类型

回调方法：

VideoPlayerEventCallback: 视频播放控件事件监听回调函数
LivePusherEventCallback: 视频播放控件事件监听回调函数

权限：

5+功能模块（permissions）

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#ffffff">{</span>
<span style="color:#87ceeb">// ...</span>
<span style="color:#ffa0a0">"permissions"</span><span style="color:#ffffff">:{</span>
	<span style="color:#87ceeb">// ...</span>
	<span style="color:#ffa0a0">"VideoPlayer"</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span>
		<span style="color:#ffa0a0">"description"</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">"视频播放"</span>
	<span style="color:#ffffff">},</span>
	<span style="color:#ffa0a0">"LivePusher"</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span>
		<span style="color:#ffa0a0">"description"</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">"直播推流"</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
			</code></span></span>

createVideoPlayer

创建VideoPlayer对象

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#98fb98">VideoPlayer</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">createVideoPlayer</span><span style="color:#ffffff">(</span><span style="color:#ffffff">id</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> styles</span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

调用此方法创建后并不会显示，需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示。注意：此时需要通过styles参数的top/left/width/height属性设置控件的位置及大小。

参数：

id: ( String ) 必选 VideoPlayer对象的全局标识
可用于通过plus.video.getVideoPlayerById()方法查找已经创建的VideoPlayer对象。
styles: ( VideoPlayerStyles ) 可选 视频播放控件参数
设置视频播放控件的位置及大小等。

返回值：

VideoPlayer : 视频播放控件对象

平台支持：

Android - 4.0+ (支持) :
Android4.0及以上版本支持。
iOS - 7.0+ (支持) :
iOS7.0及以上版本支持。

示例：

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> player </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span>
<span style="color:#87ceeb">// 创建视频播放控件</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> createVideoPlayer</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span>
	<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(!</span><span style="color:#ffffff">player</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		player </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">createVideoPlayer</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'videoplayer'</span><span style="color:#ffffff">,</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
			src</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'rtmp://live.hkstv.hk.lxdns.com/live/hks'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			left</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'0px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			width</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">'100%'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			height</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">'200px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			position</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">'static'</span>
		<span style="color:#ffffff">});</span><span style="color:#ffffff">
		plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">currentWebview</span><span style="color:#ffffff">().</span><span style="color:#ffffff">append</span><span style="color:#ffffff">(</span><span style="color:#ffffff">player</span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

uni-app使用plus注意事项

createLivePusher

创建LivePusher对象

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#98fb98">LivePusher</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">createLivePusher</span><span style="color:#ffffff">(</span><span style="color:#ffffff">id</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> styles</span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

参数：

id: ( String ) 必选 LivePusher对象的全局标识
可用于通过plus.video.getLivePusherById()方法查找已经创建的LivePusher对象。
styles: ( LivePusherStyles ) 可选 直播推流控件参数
设置直播推流控件的位置及大小等。

返回值：

LivePusher : 直播推流控件对象

平台支持：

Android - 4.1+ (支持) :
Android4.1及以上版本支持。
iOS - 8.0+ (支持) :
iOS8.0及以上版本支持。

示例：

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> pusher </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span>
<span style="color:#87ceeb">// 创建直播推流控件</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> createLivePusher</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span>
	<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(!</span><span style="color:#ffffff">pusher</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		pusher </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">createLivePusher</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'livepusher'</span><span style="color:#ffffff">,</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
			url</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			left</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'0px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			width</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">'100%'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			height</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">'300px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">
			position</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">'static'</span>
		<span style="color:#ffffff">});</span><span style="color:#ffffff">
		plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">currentWebview</span><span style="color:#ffffff">().</span><span style="color:#ffffff">append</span><span style="color:#ffffff">(</span><span style="color:#ffffff">pusher</span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

uni-app使用plus注意事项

getVideoPlayerById

查找已经创建的VideoPlayer对象

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#98fb98">VideoPlayer</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getVideoPlayerById</span><span style="color:#ffffff">(</span><span style="color:#ffffff">id</span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

查找指定id的VideoPlayer对象，如果不存在则返回null。

参数：

id: ( String ) 必选 VideoPlayer对象的全局标识
如果存在多个相同标识的VideoPlayer对象，则返回第一个查找到的VideoPlayer对象。如果不存在指定标识的VideoPlayer对象，则返回null。

返回值：

VideoPlayer : 视频播放控件对象

示例：

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#87ceeb">// 查找视频播放控件</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> findVideoPlayer</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> b </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getVideoPlayerById</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'videoplayer'</span><span style="color:#ffffff">);</span>
	<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">b</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'find success!'</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'success'</span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">}</span> <span style="color:#f0e68c"><strong>else</strong></span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'find failed!'</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'failed'</span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

uni-app使用plus注意事项

getLivePusherById

查找已经创建的LivePusher对象

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#98fb98">LivePusher</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getLivePusherById</span><span style="color:#ffffff">(</span><span style="color:#ffffff">id</span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

查找指定id的LivePusher对象，如果不存在则返回null。

参数：

id: ( String ) 必选 LivePusher对象的全局标识
如果存在多个相同标识的LivePusher对象，则返回第一个查找到的LivePusher对象。如果不存在指定标识的LivePusher对象，则返回null。

返回值：

LivePusher : 直播推流控件对象

示例：

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#87ceeb">// 查找直播推流控件</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> findLivePusher</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> b </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getLivePusherById</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'livepusher'</span><span style="color:#ffffff">);</span>
	<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">b</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'find success!'</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'success'</span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">}</span> <span style="color:#f0e68c"><strong>else</strong></span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'find failed!'</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'failed'</span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

uni-app使用plus注意事项

VideoPlayer

视频播放控件对象

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>interface</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">video</span><span style="color:#ffffff">.</span><span style="color:#98fb98">VideoPlayer</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Methods</span>
	<span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> addEventListener</span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>event</strong></span><span style="color:#ffffff">,</span><span style="color:#ffffff"> listener</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> capture</span><span style="color:#ffffff">);</span>
	<span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> setStyles</span><span style="color:#ffffff">(</span><span style="color:#ffffff">styles</span><span style="color:#ffffff">);</span>
	<span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> play</span><span style="color:#ffffff">();</span>
	<span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> pause</span><span style="color:#ffffff">();</span>
	<span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> seek</span><span style="color:#ffffff">(</span><span style="color:#ffffff">position</span><span style="color:#ffffff">);</span>
	<span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> requestFullScreen</span><span style="color:#ffffff">();</span>
	<span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> exitFullScreen</span><span style="color:#ffffff">();</span>
	<span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> stop</span><span style="color:#ffffff">();</span>
	<span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> hide</span><span style="color:#ffffff