Question

我有一个仅在<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>

Answer 1

此过程比您想象的要简单得多，我们要做的就是替换externalHTML名称。从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');
}

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

我还没有亲自测试过它，因此它可能无法正常工作，但我会尽我所能来做到这一点。

干杯！

Answer 2

所以我找到了解决方案。并且以防万一其他人有这个问题。这是我的方法：

.parent {
    /*overflow: hidden; removed */
    position: absolute; /*this is required for clip-paths to work*/
    -webkit-clip-path: inset(0); /* safari*/
    clip-path: inset(0);
    clip: rect(0px, auto, auto, 0px); /* IE11/Edge (not that IE11 supports sticky anyway!) */
}

这是我所有视频的全部内容。因为我只有四分之一，所以这样比较容易。

我可以将img的src更改为视频src并返回吗？

2 个答案: