videojs 多种音频语言

Question

如何在 videojs 中添加可切换的音轨，我正在尝试这样做：

 <video id="l2e-video" muted class="video-js vjs-default-skin vjs-big-play-centered" controls width="640" height="264" data-setup="" mediagroup="lang_tracks">
                <source src="http://localhost/1.mp4" type="video/mp4" >
                <track src="http://localhost/1.mp3" kind="descriptions" type="audio/mp3" srclang="en" label="English">
                <track src="http://localhost/1.mp3" kind="descriptions" type="audio/mp3" srclang="ar" label="Arabic">

        </video>

但是当我试图加载它时，它出错了：

Text Track parsing errors for http://localhost/1.mp3

{name: "ParsingError", code: 0, message: "Malformed WebVTT signature."}

当我明确将 type 设置为 audio 时，我不知道它是怎么说 Text track 的，我将如何实现多语言视频？！

Answer 1

I have no clue how it says Text track when am explicitly setting the type to audio

type 不是 <track> 元素的有效属性。 <track> 元素 src 属性值应指向有效的 .vtt 文件，而不是 "audio/*" 文件。

<track> 元素未加载要播放的媒体资源列表。

您可以创建 <select> 元素，并将 <option> 值设置为媒体资源路径。在 select 元素的 change 事件中，将所选 option.

的 <video> .src 设置为 .value

Answer 2

所以我最后做的是，有一个 <video> 没有任何 sound/voice，多个 <audio> 有不同的语言，我将视频与音频同步，在这里是一个使用 Angular 的实现，它可以很容易地移植到任何其他框架：-

HTML:

  <div class="video-container">
                            <video id="l2e-video" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup="" mediagroup="lang_tracks">
                            </video>
                            <audio id="l2e-audio" class="video-js vjs-default-skin" style="display:none"></audio>
    </div>

TypeScript/Javascript:

import { Video } from './../../models/video';
import { Point } from './../../models/point';
import { Audio } from "./../../models/audio";
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';



/*NOTES: add overlay for the markers*/

@Component({
    selector: 'videojs',
    templateUrl: './videojs.component.html',
    styleUrls: ['./videojs.component.scss']
})
export class VideojsComponent implements OnInit, AfterViewInit, OnDestroy {

    video: any = videojs;
    audio: any = videojs;
    prevButton: any = {};

    qualities: Array<Video> = [];
    audioLangs: Array<Audio> = [];


    constructor() {
    }


    ngOnInit(): void {
        this.qualities = [
            { src: "http://localhost/1.mp4", type: "video/mp4", label: "SD" },
            { src: "http://localhost/1.mp4", type: "video/mp4", label: "HD" },
        ];
        this.audioLangs = [
            { src: 'http://localhost/en.m4a', type: 'audio/mp3', label: "English" },
            { src: 'http://localhost/ar.m4a', type: 'audio/mp3', label: "Arabic" }
        ];
        
    }

    ngAfterViewInit(): void {
        this.audio = videojs('l2e-audio', {});

        //TODO:: save video lang ,
        this.audio.src(this.audioLangs[0]); //to be changed dynamic

        this.video = videojs('l2e-video', {
            fluid: true,
            plugins: {
            
                videoJsResolutionSwitcher: {
                    default: 'HD',
                    dynamicLabel: true
                }
            }
        });

        this.video.updateSrc(this.qualities);


        this.Sync(this.video, this.audio);
    }

    ngOnDestroy(): void {
        this.video.dispose();
    }




    ChangeLang(index) {
        this.audio.src(this.audioLangs[index]);
        this.audio.play();
        this.audio.currentTime(this.video.currentTime());
    }

    private Sync(video, audio) {

        this.video.on('timeupdate', () => {
            if (!this.video.paused())
                return;
            this.audio.trigger('timeupdate');
        });
        this.video.on('seeking', () => {
            this.audio.currentTime(this.video.currentTime());
        });
        this.video.on('volumechange', () => {
            if (this.video.muted()) {
                this.audio.muted(true);
            } else {
                this.audio.muted(false);
            }

            this.audio.volume(this.video.volume());
        });
        this.video.on('play', () => {
            this.audio.play();
        });
        this.video.on('pause', () => {
            this.audio.pause();
        });
    }

}

videojs 多种音频语言

videojs multiple audio languages

html

javascript

audio

html5-audio

video.js