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

Reloading video.js player after changing source using jquery

本文关键字：加载 video 播放器 js 新加载 jquery 源代码 使用      更新时间：2023-09-26

我设法制作一个脚本，在那里我可以改变视频源而无需重新加载整个页面，但问题是，在加载新源后，播放器不是，我只得到一个黑盒子。

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

使用.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();
});

你可以这样做

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

你应该使用播放器的API来改变视频的源，特别是src()方法:

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

在你用JS填充了其他属性之后再这样做:

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

我遇到了类似的问题，但通过动态地改变海报源，然后访问vjs海报类并改变它的风格来解决它，看看代码:

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

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

相关文章：