Video.js 更改来源,但不显示新来源
Video.js changing source, but does not show new source
抱歉我对这个话题缺乏了解
我有一个脚本可以更改视频播放器的来源。它就是这样做的。唯一的问题是 Video.js 播放器播放分配给它的第一个源。
document.getElementById("vid-player_html5_api").innerHTML = "";
document.getElementById("vid-player_html5_api").innerHTML = "<source src='" + link + "' type='video/mp4'>";
document.getElementById("vid-player_html5_api").muted = false;
因此,如果有两个按钮,并且您单击了 按钮 1,它将更改播放器的来源并显示正确的视频。然后假设您单击了 Button 2 它会更改播放器的来源,但它仍然会显示与 Button 1[相同的视频]
证明它改变了源,我检查了 Chrome 开发工具,它确实改变了源
我该如何解决这个问题?
您需要在加载新视频后再次调用 video.js:
var current_vid = document.getElementById("vid-player_html5_api")
var next_vid = document.createElement('video');
next_vid.innerHTML = '<source src="' + link + '" type="video/mp4">';
next_vid.muted = false;
current_vid.parentNode.replaceChild( next_vid, current_vid );
videojs(current_vid, {}, function(){
// do something when video.js is ready
});
您可以尝试如下,
function playVideo(videoSource, type) {
var videoElm = document.getElementById('testVideo');
var videoSourceElm = document.getElementById('testVideoSource');
if (!videoElm.paused) {
videoElm.pause();
}
videoSourceElm.src = videoSource;
videoSourceElm.type = type;
videoElm.load();
videoElm.play();
}
<video id="testVideo" width="400" controls>
<source id="testVideoSource">
</video>
<br/>
<input type="button" value="Play Video 1" onclick="playVideo('http://www.w3schools.com/html/mov_bbb.mp4', 'video/mp4')" />
<input type="button" value="Play Video 2" onclick="playVideo('http://www.w3schools.com/html/mov_bbb.ogg', 'video/ogg')" />
刚刚发现 post VideoJS 中的当前模式是使用 JSON 对象设置 .src 例如
player.src({ type: 'video/mp4', src: new_url });
唯一对我有用的方法就是这样
var player = videojs(document.querySelector('.video-js'));
player.src({
src: 'videoURL,
type: 'video/mp4'/*video type*/
});
player.play();
抱歉我对这个话题缺乏了解
我有一个脚本可以更改视频播放器的来源。它就是这样做的。唯一的问题是 Video.js 播放器播放分配给它的第一个源。
document.getElementById("vid-player_html5_api").innerHTML = "";
document.getElementById("vid-player_html5_api").innerHTML = "<source src='" + link + "' type='video/mp4'>";
document.getElementById("vid-player_html5_api").muted = false;
因此,如果有两个按钮,并且您单击了 按钮 1,它将更改播放器的来源并显示正确的视频。然后假设您单击了 Button 2 它会更改播放器的来源,但它仍然会显示与 Button 1[相同的视频]
证明它改变了源,我检查了 Chrome 开发工具,它确实改变了源
我该如何解决这个问题?
您需要在加载新视频后再次调用 video.js:
var current_vid = document.getElementById("vid-player_html5_api")
var next_vid = document.createElement('video');
next_vid.innerHTML = '<source src="' + link + '" type="video/mp4">';
next_vid.muted = false;
current_vid.parentNode.replaceChild( next_vid, current_vid );
videojs(current_vid, {}, function(){
// do something when video.js is ready
});
您可以尝试如下,
function playVideo(videoSource, type) {
var videoElm = document.getElementById('testVideo');
var videoSourceElm = document.getElementById('testVideoSource');
if (!videoElm.paused) {
videoElm.pause();
}
videoSourceElm.src = videoSource;
videoSourceElm.type = type;
videoElm.load();
videoElm.play();
}
<video id="testVideo" width="400" controls>
<source id="testVideoSource">
</video>
<br/>
<input type="button" value="Play Video 1" onclick="playVideo('http://www.w3schools.com/html/mov_bbb.mp4', 'video/mp4')" />
<input type="button" value="Play Video 2" onclick="playVideo('http://www.w3schools.com/html/mov_bbb.ogg', 'video/ogg')" />
刚刚发现 post VideoJS 中的当前模式是使用 JSON 对象设置 .src 例如
player.src({ type: 'video/mp4', src: new_url });
唯一对我有用的方法就是这样
var player = videojs(document.querySelector('.video-js'));
player.src({
src: 'videoURL,
type: 'video/mp4'/*video type*/
});
player.play();