CODEWITHSUNDEEP
javascriptjqueryvideohtml5-videovideo.js
David
David

Reputation: 367

my playlist plugin is not working on videojs?

Currently I want to implement the library of video.js in a project and to that same library add unplugin to make lists of reproductions of several videos, but when implementing everything it marks me the following:

player.playlist is not a function

Complete code of my test:

HTML Code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/4.12/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-playLists/0.2.0/videojs-playlists.js"></script>


</head>
<body>

<video id="Reproductor" class="video-js vjs-default-skin" controls
       preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"
       data-setup="{}">
    <source src="TheLast.mp4" type='video/mp4'>
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>


</body>
</html>

Code CSS:

<style type="text/css">
        .vjs-default-skin {
            color: #000000;
        }

            .vjs-default-skin .vjs-play-progress,
            .vjs-default-skin .vjs-volume-level {
                background-color: red;
            }

            .vjs-default-skin .vjs-control-bar,
            .vjs-default-skin .vjs-big-play-button {
                background: red;
            }

            .vjs-default-skin .vjs-slider {
                background: red;
            }

            .vjs-default-skin .vjs-control-bar {
                font-size: 103%;
            }
    </style>

Code Javascript:

<script>

    $(document).ready(function() {
        var player = videojs('Reproductor');

//The problem that the browser console indicates is in the line below
        player.playlist([{
            sources: [{
                src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
                type: 'video/mp4'
            }],
            poster: 'http://media.w3.org/2010/05/sintel/poster.png'
        }, {
            sources: [{
                src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
                type: 'video/mp4'
            }],
            poster: 'http://media.w3.org/2010/05/bunny/poster.png'
        }, {
            sources: [{
                src: 'http://vjs.zencdn.net/v/oceans.mp4',
                type: 'video/mp4'
            }],
            poster: 'http://www.videojs.com/img/poster.jpg'
        }, {
            sources: [{
                src: 'http://media.w3.org/2010/05/bunny/movie.mp4',
                type: 'video/mp4'
            }],
            poster: 'http://media.w3.org/2010/05/bunny/poster.png'
        }, {
            sources: [{
                src: 'http://media.w3.org/2010/05/video/movie_300.mp4',
                type: 'video/mp4'
            }],
            poster: 'http://media.w3.org/2010/05/video/poster.png'
        }]);

        // Play through the playlist automatically.
        player.playlist.autoadvance(0);
    });

</script>

All the components are in their respective place.

Upvotes: 1

Views: 1621

Answers (1)

DoomTay
DoomTay

Reputation: 316

That should be player.playList with a captial L.

On top of that, sources should be src, an array of URLs

player.playList([{
    src: ['http://media.w3.org/2010/05/sintel/trailer.mp4'],
    poster: 'http://media.w3.org/2010/05/sintel/poster.png'
}, {
    src: ['http://media.w3.org/2010/05/bunny/trailer.mp4'],
    poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
    src: ['http://vjs.zencdn.net/v/oceans.mp4'],
    poster: 'http://www.videojs.com/img/poster.jpg'
}, {
    src: ['http://media.w3.org/2010/05/bunny/movie.mp4'],
    poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
    src: ['http://media.w3.org/2010/05/video/movie_300.mp4'],
    poster: 'http://media.w3.org/2010/05/video/poster.png'
}]);

Upvotes: 2

Related Questions