Video Source Not Playing

[Live]

Does not play another video-source assigned inside the code. My code is given below

main_page.js


"use strict";
var main_view_model_1 = require('./main-view-model');
// Event handler for Page "navigatingTo" event attached in main-page.xml
function navigatingTo(args) {
    // Get the event sender
    var page = args.object;
    page.bindingContext = new main_view_model_1.VideoModel(page);
}
exports.navigatingTo = navigatingTo;



main_page_model.js

"use strict";
var observable_1 = require('data/observable');
var platform_1 = require('platform');
var VideoModel = (function (_super) {
    __extends(VideoModel, _super);
    function VideoModel(mainpage) {
        _super.call(this);
        // Initialize default values.
        this._counter = 42;
        this.updateMessage();
        this._videoPlayer = mainpage.getViewById('nativeVideoPlayer');
        // Initialize default values.
        var src = "http://2449.vod.myqcloud.com/2449_22ca37a6ea9011e5acaaf51d105342e3.f20.mp4";
        this.set("videosrc", src);
        console.log("Video constructor src =" + src);
    }
    Object.defineProperty(VideoModel.prototype, "message", {
        get: function () {
            return this._message;
        },
        set: function (value) {
            if (this._message !== value) {
                this._message = value;
                this.notifyPropertyChange('message', value);
            }
        },
        enumerable: true,
        configurable: true
    });
    VideoModel.prototype.onTestVideo = function (args) {
        /* bug here, does not play the video file apple ~/videos/sample_apple.mp4 when clicked */
        var src = "~/videos/sample_orange.mp4";
        this.set("videosrc", src);
        console.log("src =" + src);
        console.log("Playing object " + args);
        //
        //this._videoPlayer.android.src = 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
        //this._videoPlayer.android.setVideoPath("android.resource://org.nativescript.testVPlayer3/raw/sample_orange.mp4");  //can not find play error
        //this._videoPlayer.android.setVideoPath("~videos/sample_apple.mp4");
        this.playVideo();
    };
    /**
     * Play the video
     */
    VideoModel.prototype.playVideo = function () {
        console.log("PlayVideo " + this._videoPlayer + " Source = " + this.get("videosrc"));
        this._videoPlayer.play();
        console.log(" this._videoPlayer.getDuration() =" + this._videoPlayer.getDuration());
        this.set('videoDuration', this._videoPlayer.getDuration());
    };
    /**
     * Stop the video player
     */
    VideoModel.prototype.stopVideo = function () {
        if (platform_1.isAndroid) {
            this._videoPlayer.stop();
        }
    };
    VideoModel.prototype.onTap = function () {
        this._counter--;
        this.updateMessage();
    };
    VideoModel.prototype.updateMessage = function () {
        if (this._counter <= 0) {
            this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!';
        }
        else {
            this.message = this._counter + " taps left";
        }
    };
    return VideoModel;
}(observable_1.Observable));
exports.VideoModel = VideoModel;
//# sourceMappingURL=main-view-model.js.map





xml



<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:VideoPlayer="nativescript-videoplayer"
      navigatingTo="navigatingTo">
  <StackLayout>
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>


  </StackLayout>

  <StackLayout orientation="vertical" width="100%" height="100%" style.backgroundColor="lightgreen">

      <VideoPlayer:Video id="nativeVideoPlayer"
                         src="{{ videosrc }}"
                         loaded="{{ videoplayerLoaded }}"
                         finished="{{ videoFinished }}"
                         autoplay="true"
                         left="0" top="40"
                         width="100%" height="90%" verticalAlignment="middle"

      />
    <button id="nextButton" text="Test Video"  tap="{{ onTestVideo }}" style="font-size: 10;color: white;background-color: green; border-color: darkgreen; border-width: 2;border-radius:10; margin: 5"
            width="35%"/>
  </StackLayout>
</Page>



When i click button it is not showing next video?

 This code uses a Nativescript video player plugin that does not work when we modify the video-source.

[Nikolay Tsonev]

Hello,
Thank you for contacting us.

I reviewed your sample project and found that the - plugin work as expected. In my further I also found that the problem could be caused due to a problem with your ViewModel. There are two appropriate ways to make binding to works in NativeScript. The first one is to create  ViewModel by extending class and to define getter and setter for every property. You could review the below given JavaScript and TypeScript examples.

JavaScript

var observable_1 = require('data/observable');
var HelloWorldModel = (function (_super) {
    __extends(HelloWorldModel, _super);
    function HelloWorldModel() {
        _super.call(this);
        // Initialize default values.
        this._counter = 42;
        this.updateMessage();
    }
    Object.defineProperty(HelloWorldModel.prototype, "message", {
        get: function () {
            return this._message;
        },
        set: function (value) {
            if (this._message !== value) {
                this._message = value;
                this.notifyPropertyChange('message', value);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(HelloWorldModel.prototype, "videosource", {
        get: function () {
            return this._videosource;
        },
        set: function (value) {
            this._videosource = value;
            this.notifyPropertyChange('videosource', value);
        },
        enumerable: true,
        configurable: true
    });
    HelloWorldModel.prototype.onTap = function () {
        this._counter--;
        this.updateMessage();
    };
    HelloWorldModel.prototype.updateMessage = function () {
        if (this._counter <= 0) {
            this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!';
        }
        else {
            this.message = this._counter + " taps left";
        }
    };
    return HelloWorldModel;
}(observable_1.Observable));
exports.HelloWorldModel = HelloWorldModel;

TypeScript

export class User extends Observable {
    private _email: string;
    private _password: string;
    private _age: number;

    constructor(email: string, password: string, age: number) {
        super();
        this._email = email;
        this._password = password;
        this._age = age;
    }

    public get email(): string {
        return this._email;
    }

    public set email(value: string) {
        this._email = value;
        super.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: "email", value: value });
    }

    public get password(): string {
        return this._password;
    }

    public set password(value: string) {
        this._password = value;
        super.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: "password", value: value });
    }

    public get age(): number {
        return this._age;
    }

    public set age(value: number) {
        this._age = value;
        super.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: "age", value: value });
    }
}

The important part in this option is to call `notify` method, which will notify the UI for the changes.
The second one is to define observable object and handle change event like it in the documentation here.


Let me know whether this helps or if I could assist you further.
Regards,
nikolay.tsonev
Telerik by Progress