使用 jquery 更改源后重新加载 video.js 播放器答案

【问题标题】：Reloading video.js player after changing source using jquery使用 jquery 更改源后重新加载 video.js 播放器
【发布时间】：2015-07-27 21:05:54
【问题描述】：

我设法制作了一个脚本，可以在不重新加载整个页面的情况下更改视频源，但问题是加载新源后，播放器没有，我只得到一个黑框。

HTML：

<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="850" height="400" data-setup='{"example_option":true}'>
  <source id="videoMP4" src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
<div class="menu1">menu1</div>
<div class="menu2">menu2</div>
<div class="menu3">menu3</div>
<div class="menu4">menu4</div>

JavaScript：

$(".menu1").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu2").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});
$(".menu3").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu4").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});

完整代码和示例：http://codepen.io/BeBeINC/pen/PqydVM

【问题讨论】：

标签： javascript jquery html video.js

【解决方案1】：

使用.load() 函数。您应该暂停它以防止音频继续播放。

var video = document.getElementById('example_video');
var source = document.getElementById('videoMP4');
$("ELEMENT").click(function() {
    video.pause()
    source.setAttribute('src', 'NEW MP4');
    video.load();
    video.play();
});

【讨论】：

它确实更改了源并重新加载播放器，但相同的旧视频重新启动：codepen.io/BeBeINC/pen/OVaJOz
没问题，我的荣幸:)

【解决方案2】：

你可以这样做

var player = videojs(document.querySelector('.video-js'));
  player.src({
                 src: 'videoURL,
                  type: 'video/mp4'/*video type*/
            });

  player.play();

【讨论】：

这对我有用 type: 'application/vnd.apple.mpegurl' ...事实上，调用 load() 实际上导致它中断！

【解决方案3】：

您应该使用播放器的 API 更改视频的来源，特别是 src() 方法：

yourPlayer.src("http://foo.com/bar.mp4");

【讨论】：

【解决方案4】：

在你用JS填充其他属性后这样做：

$('#player')[0].load();

【讨论】：

添加代码解释会很棒。不鼓励在 SO 上仅提供代码答案。

【解决方案5】：

我遇到了类似的问题，但通过首先动态更改海报源然后访问 vjs 海报类并更改其样式来解决它，看看代码：

$('#videoPlayer video').attr('poster', "https://dummyimage.com/hd1080");

document.querySelector("vjs-poster")[0].style.backgroundImage = "https://dummyimage.com/hd1080";

【讨论】：