мой плагин плейлиста не работает на videojs? - PullRequest
Новая
       31

мой плагин плейлиста не работает на videojs?

0 голосов
/ 26 мая 2018

В настоящее время я хочу внедрить библиотеку video.js в проект и в эту же библиотеку добавить unplugin для создания списков репродукций нескольких видео, но при реализации всего этого я отмечаю следующее: 

player.playlist is not a function

Полный код моего теста:

HTML-код: 

<!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>

Код 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>

Код 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>

Все компоненты находятся на своих местах.

1 Ответ

0 голосов
/ 07 июня 2018
...