Question

如何使用JavaScript或jQuery替换iframe中嵌入的视频？

我的HTML是：

  <iframe src="https://openload.co/embed/7Cq9AdeLtL0/" allowfullscreen="true" 
  id="bigframe" frameborder="0"></iframe>
  <a data-link="https://openload.co/embed/5xTolN_ejRI/">openload</a>

其他视频源应位于<a>标记中，因此当我点击“＃34; openload＆＃34;”时，它会将视频源更改为第二个源，另一个认为我需要执行此操作这在多个帖子中有一个可变视频

Answer 1

使用html视频标签代替iframe播放视频是一种打击。你可以使用下面的jquery来实现它

HTML

$table

JS

<a data-link="https://openload.co/embed/5xTolN_ejRI/" href="#">Video 1</a>  
<a data-link="https://openload.co/embed/5xTolN_ejRI/"  href="#">Video 2</a>  

<video width="320" height="240" controls>
  <source src="https://openload.co/embed/5xTolN_ejRI" type="video/mp4">  
Your browser does not support the video tag.
</video>

Answer 2

您不需要任何JavaScript。

将iframe命名为ex。 <iframe src='about:blank' name='vid'....
接下来，为每个链接指定target属性，其中包含iframe名称的值。恩。 <a href='path/to/video.mp4' target='vid'...

演示

在这里不起作用，请转到此Plunker for a working demo

<a href='http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4' target='vid'>1</a>

<a href='http://media6000.dropshots.com/photos/1381926/20170326/005610.mp4' target='vid'>2</a>

<a href='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' target='vid'>3</a>


<iframe src='about:blank' name='vid' width='320' height='180'></iframe>

Answer 3

const iFrame = document.querySelectorAll("iframe");
// console.log(iFrame)
iFrame.forEach((item, index) => {
  let src = item.src;
  const newItem = document.createElement("video");
  newItem.style = "width:640px; height:360px";
  newItem.src = src;
  item.parentNode.replaceChild(newItem, iFrame[index]);
  newItem.setAttribute("class", "iframe-video-tag-" + index);
  newItem.setAttribute("controls", "true");
  let videoTag = document.getElementsByClassName("iframe-video-tag-" + index);
  videoTag.src = src;
});

替换嵌入式iframe中的视频

3 个答案:

演示