如何在mediaelement.js中插入字幕?

时间:2018-10-18 05:46:48

标签: mediaelement.js

请告诉我如何在与mediaelement.js相关的视频中插入字幕?

我写了这样的代码

HTML

 <head>
 <meta charset="UTF-8"/>
 <title>111</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>
  <video id="player" controls preload="metadata" >
  <source src="1.mp4" type="video/mp4">     
  <track label="rus" kind="subtitles" srclang="ru" src="sub/rus.vtt"/>
  <track label="eng" kind="subtitles" srclang="en" src="sub/eng.srt"/>
  </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)

有什么办法可以解决这个问题? 也许我做错了 请告诉我 来自https://github.com/mediaelement/mediaelement/blob/master/docs/usage.md#setting-new-captions

的代码

0 个答案:

没有答案