NativeScript VideoPlayer
A NativeScript plugin to provide the ability to play local and remote videos.
Installation
From your command prompt/terminal go to your app's root folder and execute:
NativeScript Version 7+:tns plugin add nativescript-videoplayer
NativeScript version prior to 7:tns plugin add nativescript-videoplayer@4.2.1
Platform controls used:
| Android | iOS |
|---|---|
| Android MediaPlayer | iOS AVPlayer |
| Sample 1 | Sample 2 |
|---|---|
Usage
<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 Usage
// 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.org/angular/plugins/angular-third-party.html#simple-elements
With AngularNative you have to explicitly close all components so the correct template code is below.
<VideoPlayer
src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
autoplay="true"
height="300"></VideoPlayer>
Properties
| Property | Description |
|---|---|
| src | The src file for the video. Set the video file to play, for best performance use local video files if possible. The file must adhere to the platforms accepted video formats. For reference check the platform specs on playing videos. |
| autoplay - (boolean) | Set if the video should start playing as soon as possible or to wait for user interaction. |
| controls - (boolean) | Set to use the native video player's media playback controls. |
| muted - (boolean) | Mutes the native video player. |
| loop - (boolean) | Sets the native video player to loop once playback has finished. |
| fill - (boolean) | If true, the aspect ratio of the video will not be honored and it will fill the entire space available. |
| observeCurrentTime - (boolean) | If true, currentTimeUpdated callback is possible. |
| headers - (Map<string, string>) | Set headers to add when loading a video from URL. |
API
| Method | Description |
|---|---|
| play | Start playing the video. |
| pause | Pause the video |
| seekToTime(time: number) | Seek the video to a time (milliseconds) |
| getCurrentTime | Returns the current time in the video duration (milliseconds) |
| getDuration | Returns the current time in the video duration (milliseconds) |
| destroy | Destroy the video player and free resources |
| mute(boolean) | If true, mutes the video. If false, unmute the video. |
| setVolume(volume: number) | Set the volume - Must be between 0 and 1. |
| ANDROID ONLY - stop | Stop the playback - this resets the player and remove the video src |
Observable Properties
- currentTime() - Current time of video.
Events
| Event | Description |
|---|---|
| errorEvent | This event fires when an error in the source code is thrown. |
| playbackReadyEvent | This event fires when the video is ready. |
| playbackStartEvent | This event fires when video starts playback. |
| seekToTimeCompleteEvent | This event fires when seeking is complete. |
| currentTimeUpdatedEvent | This event fires when the current time of playing video is changed. |
| finishedEvent | This event fires when the video is complete. |
| mutedEvent | This event fires when video is muted. |
| unmutedEvent | This event fires when video is unmutedEvent. |
| pausedEvent | This event fires when video is paused. |
| volumeSetEvent | This event fires when the volume is set. |
iOS Logging
When running the iOS Simulator, after playing a video the iOS system may writelog messages to the console every few seconds of the form
[aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
They will continue being logged even after the video has been properly destroyed.These messages can be safely ignored. To turn them off completely, run the followingcommand in your shell before running tns run ios:
export SIMCTL_CHILD_OS_ACTIVITY_MODE="disable"
-
1.安装 npm install vue-video-player --save 2.全局引用， 在main.js里面导入并引用 import VideoPlayer from “vue-video-player”; import hls from “videojs-contrib-hls”; require(“video.js/dist/video-js.css”); require(“vue-
-
最近在开发一个类似腾讯视频这样的电影播放网站，遇到了不少问题，记录一下使用videojs插件时，在safari浏览器下引入插件后，清晰度失效的问题 因为电影、电视剧播放器这块是我负责的模块，项目中使用的是videojs，因为要实现播倍速切换、清晰度切换等功能，所以又引入了videojs-contrib-quality-levels.js 插件。并且项目要求兼容IE11及以上，chrome，fire
-
White Paper Today's computer users live and work in an interconnected world. They always have a network at hand and expect their data to be available at all times wherever they are. The boundary betwe
-
Web的实现(Web PC、Web App) // 这里使用了flv.js <script src="./flv.min.js"></script> <video id="videoElement"></video> <script> if (flvjs.isSupported()) { var videoElement = document.getElementById('videoEle
-
介绍 (Introduction) 视频控件支持播放FLV和F4v文件。 此控件包含用于控制视频播放的全功能UI。 Class 声明 (Class Declaration) 以下是spark.components.VideoPlayer类的声明 - public class VideoPlayer extends SkinnableComponent 公共属性 (Public Prope
-
VideoPlayer 用Layer自定义的视频播放功能，支持网络播放，快进等等。
-
Apdev VideoPlayer 是一个使用 ActionScript 3.0 开发的在线视频播放工具。 在线演示
-
VideoPlayer 是一种视频播放组件，可通过该组件播放本地和远程视频。 播放本地视频： 播放远程视频： 点击 属性检查器 下面的 添加组件 按钮，然后从 UI 组件 中选择 VideoPlayer，即可添加 VideoPlayer 组件到节点上。 VideoPlayer 的脚本接口请参考 VideoPlayer API。 VideoPlayer 属性 属性 功能说明 Resource Typ
-
NativeScript 可以使用 Javascript，CSS, XML 创建真正的 Native 跨平台应用，支持 iOS Android，NativeScript 将您的跨平台代码翻译成目标平台的代码。 UI 使用 XML 描述，CSS 样式，在编译时将 UI 转化成本地原生代码,最终得到正在的 Native 原生应用。 Telerik 公开了用于创建安卓、iOS和Windows Unive
-
NativeScript Command-Line Interface The NativeScript CLI lets you create, build, and deploy NativeScript-based apps on iOS and Android devices. Get it using: npm install -g nativescript What is Native