Я ищу видеоплеер web / html5 / javascript, который поддерживает несколько звуковых дорожек / потоков в видеофайле - PullRequest
Новая
       102

Я ищу видеоплеер web / html5 / javascript, который поддерживает несколько звуковых дорожек / потоков в видеофайле

1 голос
/ 02 апреля 2020

Я получаю видеофайлы mp4 в формате h.264 / aa c и хочу их воспроизвести. Некоторые из моих видеофайлов содержат несколько аудиопотоков или дорожек (например, поток engli sh и поток spani sh). Я хочу позволить пользователю переключаться между двумя звуковыми дорожками. Я пробовал видео. js, которое будет нормально воспроизводить видео и аудиопоток по умолчанию, но я не вижу способа изменить звуковые дорожки в пользовательском интерфейсе, а видео js .audioTracks () всегда возвращает пустой массив (я использую Chrome и мне нужна только поддержка Chrome). 

var video = document.getElementById("video");
video.audioTracks; // <-- undefined

AND 

let video = videojs('video');
let audioTrackList = video.audioTracks();
audioTrackList.tracks; // <-- [] empty array

Кто-нибудь знает решение, будь то что-то я делаю неправильно или отсутствует в видео. js, плагин / расширение для видео. js или другой проигрыватель в целом?

РЕДАКТИРОВАТЬ:

Вот основы c пример html файл: 

<html>
<head>
  <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup="{}"
  >
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.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="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.7.5/video.js"></script>
<script>
var vid = document.getElementById("my-video");
vid.onloadeddata = function() {

    // get the current players AudioTrackList object
    var player = videojs('my-video')
    let tracks = player.audioTracks();

    alert(tracks.length);

    for (let i = 0; i < tracks.length; i++) {
        let track = tracks[i];
        console.log(track);
        alert(track.language);
    }
};
</script>
</body>
</html>

И он только предупреждает «0». Никаких последующих оповещений и консольных логов. Протестировано в Chrome, Firefox и Edge.

ОБНОВЛЕНИЕ: я наконец обнаружил, что включение флага "enable-эксперимент-web-platform-features" в chrome: // flags (https://caniuse.com/#feat = аудиотреки ) позволяет этому методу работать.

Вот некоторые основные c html код: 

<html>
<head>
    <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet"/>
<body>
<video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        width="640"
        height="264"
        data-setup="{}">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.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="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
        >
    </p>
</video>

<button onclick="onClick()">Toggle Audio</button>
<script src="https://vjs.zencdn.net/7.7.5/video.js"></script>
<script>
    var VIDEO_JS = videojs('my-video');

    function onClick() {
        let tracks = VIDEO_JS.audioTracks();

        tracks.tracks_[0].enabled = !tracks.tracks_[0].enabled;
        tracks.tracks_[1].enabled = !tracks.tracks_[1].enabled;
    }
</script>
</body>
</html>

Но переключение звука назад и вперед не не работает хорошо. Звук мгновенно переключается, но видео останавливается до тех пор, пока оно не зафиксируется или что-то в этом роде, но все становится не синхронизированным c.

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Вы должны конвертировать ваши видео в HLS. Видео. js поддерживает несколько звуковых дорожек автоматически с помощью HLS.

0 голосов
/ 02 апреля 2020

Переключение пользователя аудиодорожки в настоящее время не поддерживается видео. js в соответствии с видео. js документация (https://docs.videojs.com/docs/guides/audio-tracks.html):

Отсутствует функциональность

В настоящее время невозможно добавить AudioTracks непрограммным c способом. Буквальное переключение AudioTracks для воспроизведения не обрабатывается видео. js и должно обрабатываться чем-то другим. video. js хранит только представление треков

Вы можете добавлять, удалять и включать треки программно - подробности для этого включены в ссылку выше.

Чтобы увидеть все аудиодорожки в видео:

player.audioTracks () -> AudioTrackList

Это основной интерфейс в аудиодорожках проигрывателя. Он возвращает AudioTrackList, который представляет собой объект в виде массива, который содержит все AudioTrack на проигрывателе.

Если вы посмотрите на фрагмент ниже, он показывает начало видео и аудиотреки, перечисленные с использованием метода над. Посмотрите на предупреждения и вывод на консоль (в последнем видео есть ошибка в консоли. js распределение на момент написания, но вы можете проигнорировать это и прокрутить вниз, и вы увидите список звуковых дорожек) .

Это основано на видео. js руководство по началу работы, и вы можете заменить любой URL-адрес видео, который вам нужен, чтобы проверить собственное видео. 

var vid = document.getElementById("my-video");
vid.onloadeddata = function() {
        
    // get the current players AudioTrackList object
    var player = videojs('my-video')
    let tracks = player.audioTracks();
    
    alert(tracks.length);
    
    for (let i = 0; i < tracks.length; i++) {
        let track = tracks[i];
        console.log(track);
        alert(track.language);
    }
};
<head>
  <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup="{}"
  >
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.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="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>
  
  <script src="https://vjs.zencdn.net/7.7.5/video.js"></script>

</body>
...