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."}

在明确将Text track设置为type时，我不清楚audio是如何说的，我如何才能获得包含多种语言的视频？！

Answer 1

所以我最终做的是，有一个没有任何声音/声音的 <video>，以及多个不同语言的 <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>

打字稿/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();
        });
    }

}

Answer 2

我不明白在明确设置时如何说type audio至type

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

<select>元素不会加载要播放的媒体资源列表。

您可以创建一个<option>元素，其中change值设置为媒体资源的路径。在select事件中<video>元素设置.src .value至所选option的{{1}}。

videojs多种音频语言

2 个答案: