video.js 视频播放插件使用_videojs 加载字母-优快云博客

本文介绍了如何使用video.js库实现在网页中播放视频，并动态切换多种语言字幕。首先，展示了HTML中的video标签和source、track元素的使用，然后详细阐述了video.js的初始化设置，包括控件、自动播放等属性。接着，演示了如何根据接口数据动态修改视频和字幕源。在字幕切换过程中，先移除原有字幕轨道，再添加新的字幕轨道。最后，列举了监听视频播放状态的方法，如播放、暂停和结束事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

video.js 实现视频播放，多种语言字幕点击切换

1.参考链接video.js官网

https://videojs.com/

2.html代码视频资源标签source track 字幕资源标签，在html中可不写

    <video id="myVideo" class="video-js">
       <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
       <track
        default
        kind="subtitles"
       :label="简体中文"
     /> 
</video>

3.初始化

 mounted() {
      this.initVideo()
    },
    method:{
 initVideo() {
        let that = this
        //初始化视频方法
        myPlayer = this.$video(document.getElementById('myVideo'), {
          language: 'zh-CN',
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: 'autoplay',
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: 'auto',
        })

        myPlayer.ready(function () {
          myPlayer.volume(0.5)
          myPlayer.play()
        })
        console.log(myPlayer, 'document.getElementById')
        //监听视频播放完成
        myPlayer.on('ended', function () {
          myPlayer.exitFullscreen()
        })
        //监听视频暂停
        myPlayer.on('pause', function () {
        })
        //监听视频播放
        myPlayer.on('play', function () {
        })
      },
}

4.根据接口数据动态修改视频播放地址

myPlayer.src(data.video.url_resource.url)//括号中为后台接口返回的视频地址

5.根据接口数据动态修改视频字母地址以及实现多语言字幕切换
在修改字母地址之前需要先清除原有的字幕轨道，字幕轨道里数据为数组的形式

var oldTracks = myPlayer.remoteTextTracks()
        var i = oldTracks.length
        while (i--) {
          myPlayer.removeRemoteTextTrack(oldTracks[i])
        }

6.赋值新的字幕地址

   var zhurl = {
          kind: 'subtitles',
          label: '中文简体',    //字幕语言
          src: url,     //url为接口返回字幕地址的地址
          default: 'true',
        }
 myPlayer.addRemoteTextTrack(zhurl, true)    //修改视频播放地址