Video Source Not Playing

Thread is closed for posting
2 posts, 0 answers
  1. Live
    Live avatar
    12 posts
    Member since:
    Oct 2016

    Posted 18 Nov 2016 Link to this post

    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.

  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 18 Nov 2016 Link to this post

    Hello,
    Thank you for contacting us.

    I reviewed your sample project and found that the nativescript-videoplayer plugin work as expected. In my further research I also found that the problem could be caused due to a problem with your ViewModelThere are two appropriate ways to make binding to works in NativeScript. The first one is to create custon ViewModel by extending Observable 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 new observable object and handle porperty change event like it is describe in the documentation here.


    Let me know whether this helps or if I could assist you further.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top