Video.js: How to use on Vue

[HadiChen]

I have been unable to use vue, I hope to be a document

[Adynnor]

Working fine for me?

[edouard-lopez]

@Adynnor can you paste some snippet to show how you did it? Do you know how to change video dynamically?

[Adynnor]

@edouard-lopez
Here is an example of everything I use.
Yes everything can be dynamic if you want.

<template>
    <video playsinline id="myPlayer" class="video-js vjs-default-skin" width="100%" controls preload="auto" data-setup='{ "aspectRatio":"16:9" }'></video>
</template>

<script>
    window.videojs = require('video.js');

    export default {
        data(){
            return{
                player: '',
                url: 'https://someurl.com',
                volume: 1
            };
        },
        methods: {
            playerInitialize(){ 
                this.player = videojs('myPlayer'); 
            },
            playerDispose(){ 
                this.player.dispose(); 
            },

            playerPlay(){
                this.player.play();
            },
            playerPause(){
                this.player.pause();
            },


            playerSetSrc(url){ 
                this.player.src(url); 
            },
            playerSetVolume(float){
                this.player.volume(float); 
            },
            playerSetPoster(url){ 
                this.player.poster(url); 
            },
            playerSetTime(time){
                this.player.currentTime(time);
            },


            playerEventEnded(){
                console.log('ended');
            },
            playerEventVolume(){ 
                this.volume = this.player.volume(); 
            },
            playerEventError(){ 
                console.log( this.playerGetError() )
            },


            playerGetPaused(){
                return this.player.paused();
            },
            playerGetTime(){
                return this.player.currentTime();
            },
            playerGetError(){
                return this.player.error().message;
            },


            playerSetupEvents(){
                this.player.on('ended', function(){ var a = window.playerEvents.playerEventEnded(); });
                this.player.on('volumechange', function(){ window.playerEvents.playerEventVolume(); });
                this.player.on('error', function(){ window.playerEvents.playerEventError(); });
            },
        },
        mounted(){
            window.playerEvents = this;
            this.playerInitialize();
            this.playerSetSrc(this.url);
            this.playerSetupEvents();
        },
        beforeDestroy() { 
            this.playerDispose(); 
        }
    }
</script>

[edouard-lopez]

@Adynnor gee, I was missing the this.player.src(url); !
Thanks

[Adynnor]

@edouard-lopez NP, glad you worked it out! :)

[gkatsev]

@Adynnor would you be able to write a quick doc about using video.js with vue similar to our react doc?

[gkatsev]

Closing this as it's been answered. If anyone wants to submit a PR to make a doc like the react doc, that would be awesome!

[chopfitzroy]

PR submitted #5899.

[gkatsev]

Thanks @CrashyBang!