native-script-videoplayer | NativeScript 商场

NativeScript VideoPlayer

一个 NativeScript 插件，提供播放本地和远程视频的能力。

安装

从您的命令提示符/终端进入您的应用程序根目录，并执行

NativeScript 版本 7+：tns plugin add native-script-videoplayer

NativeScript 版本低于 7：tns plugin add [email protected]

使用的平台控件

Android	iOS
Android MediaPlayer	iOS AVPlayer

示例 1	示例 2

使用方法

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:VideoPlayer="nativescript-videoplayer">
        <StackLayout>

            <VideoPlayer:Video id="nativeVideoPlayer"
            controls="true" loop="true" autoplay="false" height="280"
            src="~/videos/big_buck_bunny.mp4" />

            <!-- Remote file to test with https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->

        </StackLayout>
</Page>

import { Video } from 'nativescript-videoplayer';

const video = topmost().currentPage.getViewById('nativeVideoPlayer') as Video;
// Setting event listeners on the Video
video.on(Video.pausedEvent, () => {
  console.log('Video has been paused.');
});

video.on(Video.mutedEvent, () => {
  console.log('Video has been muted.');
});

// changing the src
video.src = 'some video file or url';

// set loop
video.loop = false;

Angular NativeScript 使用方法

// somewhere at top of your component or bootstrap file
import { registerElement } from "nativescript-angular/element-registry";
import { Video } from 'nativescript-videoplayer';
registerElement("VideoPlayer", () => Video);
// documentation: https://docs.nativescript.cn/angular/plugins/angular-third-party.html#simple-elements

使用 AngularNative，您必须显式关闭所有组件，因此以下模板代码是正确的。

  <VideoPlayer
      src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      autoplay="true"
      height="300"></VideoPlayer>

属性

属性	描述
src	视频的 src 文件。设置要播放的视频文件，为了最佳性能，如果可能，请使用本地视频文件。文件必须符合平台接受的视频格式。有关参考，请检查平台播放视频的规范。
autoplay - (布尔值)	设置视频是否应立即开始播放或等待用户交互。
controls - (布尔值)	设置为使用原生视频播放器的媒体播放控件。
muted - (布尔值)	静音原生视频播放器。
loop - (布尔值)	设置原生视频播放器在播放完成后循环。
fill - (布尔值)	如果为 true，视频的纵横比将不被尊重，并将填充整个可用空间。
observeCurrentTime - (布尔值)	如果为 true，则 currentTimeUpdated 回调是可能的。
headers - (Map)	设置加载来自 URL 的视频时要添加的标头。

API

方法	描述
play	开始播放视频。
pause	暂停视频
seekToTime(time: number)	将视频搜索到指定时间（毫秒）
getCurrentTime	返回视频持续时间的当前时间（毫秒）
getDuration	返回视频持续时间的当前时间（毫秒）
destroy	销毁视频播放器和释放资源
mute(boolean)	如果为 true，则静音视频。如果为 false，则取消静音视频。
setVolume(volume: number)	设置音量 - 必须介于 0 和 1 之间。
仅限 ANDROID - stop	停止播放 - 这将重置播放器并移除视频 src

可观察属性

currentTime() - 视频的当前时间。

事件

事件	描述
errorEvent	当抛出源代码中的错误时，此事件触发。
playbackReadyEvent	当视频准备好时，此事件触发。
playbackStartEvent	当视频开始播放时，此事件触发。
seekToTimeCompleteEvent	当搜索完成时，此事件触发。
currentTimeUpdatedEvent	当播放视频的当前时间更改时，此事件触发。
finishedEvent	当视频完成时，此事件触发。
mutedEvent	当视频静音时，此事件触发。
unmutedEvent	当视频取消静音时，此事件触发。
pausedEvent	当视频暂停时，此事件触发。
volumeSetEvent	当设置音量时，此事件触发。

iOS 记录

当运行iOS模拟器时，播放视频后，iOS系统可能会每隔几秒向控制台写入日志消息，形式如下：

[aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0

即使视频已经被正确销毁，这些消息也会继续被记录。这些消息可以安全忽略。要完全关闭它们，请在运行 tns run ios 前在您的shell中运行以下命令：

export SIMCTL_CHILD_OS_ACTIVITY_MODE="disable"