Add video sources programmatically

sergibondarenko commented 7 years ago

Is there a way to add video sources programmatically?

ghost commented 7 years ago

You should be able to do so using the vjs-media attribute. Let me know if that works out for you.

sergibondarenko commented 7 years ago

As the first step, I added two videos manually in the controller. Only the first video plays. The second doesn't play.

My goal is to have videos playing automatically, without controls, one video after another. With minimum delay between videos, ideally with no delay at all. I think the next video must be preloaded to minimize the delay. And I want to play this playlist infinitely while the web page is open. When the last video is ended, the first video in sources must play. Later I will add some randomizing sort to have the order of video sources different every time the last video ends playing.

Controller:

angular.module('VideoChannelCtrl', [])
    .controller('VideoChannelController', ['$scope', function($scope) {

    $scope.mediaToggle = {
        sources: [
            {   
                src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
                type: 'video/mp4'
            },
            {   
                src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
                type: 'video/mp4'
            }
        ]
    };

    //listen for when the vjs-media object changes
    $scope.$on('vjsVideoMediaChanged', function (e, data) {
        console.log('vjsVideoMediaChanged event was fired');
    });

}]);

View:

<div class="main-player-container">
    <video class="video-js vjs-default-skin" autoplay preload="auto"
               width="592" height="252" vjs-video vjs-media="mediaToggle">
    </video>
</div>

index.html

...
    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="libs/videojs/dist/video.min.js"></script>
    <script src="libs/videojs-playlist/dist/videojs-playlist.min.js"></script>
    <script src="libs/vjs-video/dist/vjs-video.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/services/CoubService.js"></script>
    <script src="js/controllers/VideoChannelCtrl.js"></script>
...
<body ng-app="fooApp" ng-controller="VideoChannelController">
<div ng-view></div>
...

ghost commented 7 years ago

Ok, now I understand what you're trying to do. You can use vjs-media to accomplish this but the way it would have to work is you have a listener for the end of a video and then you can swap out the video with the next one. The vjsVideoMediaChanged event will only get fired when mediaToggle changes.

Looking at your screenshot in #52, it appears as if you aren't loading the styles for video.js. Check to make sure everything is loaded correctly. It should look like the following:

Another reason you may be having problems is because of the autoplay. It turns out by putting autoplay directly on the tag (see here). Instead of putting autoplay directly on the tag, you can use vjs-setup like is done in this codepen.

ghost commented 7 years ago

The autoplay tag appears to have been the issue

ghost commented 7 years ago

Closing this out as it appears the problem was resolved.

bernardoadc commented 6 years ago

@sergibondarenko not to cause any controversy, but videogular does this fairly easily: http://www.videogular.com/examples/creating-a-simple-video-playlist/

ghost commented 6 years ago

That’s a nice option. 👍🏾Currently vjs-video isn’t set up to easily manage playlists.

LonnyGomes / vjs-video

Add video sources programmatically #51