我可以将图像的src更改为视频src并返回吗?

问题描述 投票:0回答:2

我有一个只在<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>
javascript html
2个回答
0
投票

这个过程比您想象的要简单得多,我们需要做的就是替换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');
}

这是一个如何将图像元素转换为视频元素的示例。

我自己没有测试过,所以它可能不起作用,但它是我用我的知识做的最好的。

干杯!


0
投票

所以我找到了解决方案。只是因为其他人有这个问题。这就是我做到的方式:

     $(document).ready(function(){
         $('#myVideo3').click(function(){
             $('#live').hide();
             $('#playerday').hide();
             $('#playerweek').hide();
             $('#playermonth').show();
         });
     });

我已经完成了所有视频。因为我只有四肢,所以更容易。

© www.soinside.com 2019 - 2024. All rights reserved.