Как вставить субтитры в mediaelement.js?

222

24 февраля 2019, 19:20

Подскажите пожалуйста как вставить субтитры в видео с использованием mediaelement.js?

Я смог написать вот такой код

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Название страницы</title>

        <script src = "skript/mu/jquery-3.3.1.min.js"> </script>
        <script src = "skript/mediaelement-and-player.min.js"> </script>
        <link rel = "stylesheet" href = "skript/mediaelementplayer.css" />
        <script src = "skript/mu/3.js"> </script>
    </head>

    <body>

    <div id="program3d"></div>
<video id="nog" controls preload="metadata" >
    <source src="1.mp4" type="video/mp4">     
</video>

    </body>
</html>

3.js

jQuery(document).ready(function($) {
        $('audio,video').mediaelementplayer({
        });
var player = new MediaElementPlayer('#player');
const track = document.createElement('track');
track.kind = 'subtitles';
track.label = 'English';
track.src = 'sub/eng.vtt';
track.srclang = 'en';
if (player.trackFiles !== null) {
player.trackFiles = [track];
}
player.findTracks();
player.loadTrack(0);
player.setTrack('mep_0_track_0_subtitles_en');
        });

Но почему то нечего не работает и Выдает ошибку

mediaelement-and-player.min.js:12 Failed to load file:///C:/Users/igorn/Downloads/Sait%20test/test%202/sub/eng.vtt: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
mediaelement-and-player.min.js:12 Uncaught TypeError: Cannot read property 'hideCaptionsButtonWhenEmpty' of undefined
    at e.checkForTracks (mediaelement-and-player.min.js:12)
    at e.loadNextTrack (mediaelement-and-player.min.js:12)
    at mediaelement-and-player.min.js:12
    at XMLHttpRequest.i.onreadystatechange (mediaelement-and-player.min.js:12)
    at c (mediaelement-and-player.min.js:12)
    at e.loadTrack (mediaelement-and-player.min.js:12)
    at HTMLDocument.<anonymous> (3.js:19)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)
jquery-3.3.1.min.js:2 jQuery.Deferred exception: Cannot read property 'querySelectorAll' of undefined TypeError: Cannot read property 'querySelectorAll' of undefined
    at e.setTrack (file:///C:/Users/igorn/Downloads/Sait%20test/test%202/skript/mediaelement-and-player.min.js:12:53295)
    at HTMLDocument.<anonymous> (file:///C:/Users/igorn/Downloads/Sait%20test/test%202/skript/mu/3.js:21:8)
    at l (file:///C:/Users/igorn/Downloads/Sait%20test/test%202/skript/mu/jquery-3.3.1.min.js:2:29375)
    at c (file:///C:/Users/igorn/Downloads/Sait%20test/test%202/skript/mu/jquery-3.3.1.min.js:2:29677) undefined
jquery-3.3.1.min.js:2 Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined
    at e.setTrack (mediaelement-and-player.min.js:12)
    at HTMLDocument.<anonymous> (3.js:21)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)

Может быть я что-то неправильно делаю Пожалуйста подскажите как это исправить