NativeScript Video Player

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

安装

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

npm i @essent/nativescript-videoplayer

使用的平台控件

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

API

方法	描述
play	开始播放视频。
pause	暂停视频
seekToTime(time: number)	将视频查找到一个时间（毫秒）
getCurrentTime	返回视频持续时间的当前时间（毫秒）
getDuration	返回视频持续时间的当前时间（毫秒）
destroy	销毁视频播放器并释放资源
mute(boolean)	如果为真，则静音视频。如果为假，则取消静音视频。
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"