video.js 动态 src

video.js 是一款很流行的 html5 视频播放插件。很适合在移动端播放视频(比如微信网页)，功能强大，且支持降级到 flash,兼容 ie8。

看下默认例子：

<head>
  <title>Video.js | HTML5 Video Player</title>
  <link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
  <script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
</head>

<body>
  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
    <track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
    <!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
    <!-- Tracks need an ending tag thanks to IE9 -->
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>
</body>

controls 表示控制条，prload 表示预加载，poster 表示最初的显示的图片。data-set 支持用 json 来设置一些参数。source 不用说了，track 指的是字幕。

还有一些常用设置，请点我查看

下面重点说一下动态 src 的情况

正常情况下，动态改变上面默认例子的 source 的 src，但视频并不会随之改变，还是显示默认的视频

感谢 @gengzx 和 @叶落深秋给出的答案

这里结合了一下，给出 vue 的动态 src 设置方法，其余框架同理

// 更新视频 src
updateSrc (src) {
  this.$nextTick(() => {
    window.videojs(document.querySelector('.video-js'), {}).ready(function () {
      this.pause()
      // this.reset()
      this.src(src)
      this.load(src)
    })
  })
}

现在还有一个问题，当改变 src 后，播放按钮和视频时长并没有改变，需要播放视频后才会更新，而且上面代码中提示 reset is not a function，这个还需要研究一下

video.js 动态 src

Search

Post Directory