我有一个只在<img>
标签上运行的流,并希望有机会在同一页面上观看三个不同的视频,使用相同的空间。所以,而不是<img>
流,而不是<video>
。它应该与按钮一起使用。这样按钮就可以将img的源代码转换为视频。
我尝试了几件不起作用的东西。目前我坚持这个:
这不幸没有用,我不知道自从我刚开始编程以来要改变什么。 (我也不太了解js,所以我不知道它是否可以,因为我没有写它。)
<!DOCTYPE html>
<html>
<head>
<title>Livestream</title>
</head>
<body>
<div>
<button data-video-url="/path/to/my/video/orstream"></button>
<button data-video-url=""></button>
<button data-video-url=""></button>
<button data-video-url=""></button>
</div>
<img id="player" src="mystreamsource" alt="Livestream" width="80%"> -->!originaly it was a video tag
</body>
</html>
<script>
function swapVideo() {
player.src = this.getAttribute("data-video-url");
player.load();
player.play();
}
var videoPlayButtons = document.querySelectorAll("button"),
player = document.getElementById("player");
for (var i=0; i<videoPlayButtons.length; i++){
videoPlayButtons[i].addEventListener('click', swapVideo);
}
</script>
这个过程比您想象的要简单得多,我们需要做的就是替换outerHTML名称。从img到视频,然后也添加一个源元素。
function swapItem() {
document.getElementById("player").outerHTML =
document.getElementById("player").outerHTML.replace('img',"video");
var video = document.createElement('video');
var source = document.createElement('source');
source.src = 'movie.mp4';
source.type = 'video/mp4';
var player = document.getElementById('player');
video.src = 'http://www.example.com';
player.appendChild('source');
}
这是一个如何将图像元素转换为视频元素的示例。
我自己没有测试过,所以它可能不起作用,但它是我用我的知识做的最好的。
干杯!
所以我找到了解决方案。只是因为其他人有这个问题。这就是我做到的方式:
$(document).ready(function(){
$('#myVideo3').click(function(){
$('#live').hide();
$('#playerday').hide();
$('#playerweek').hide();
$('#playermonth').show();
});
});
我已经完成了所有视频。因为我只有四肢,所以更容易。