JavaScript 动态修改 embed 标签 src 属性失效的解决方案

作者:函数茶馆

时间:2026-10-30

浏览:324

本文介绍在JavaScript中动态切换embed标签视频源时遇到的常见问题及解决方案。通过隐藏标签、清空内容后重新赋值的方式,成功实现视频链接的动态切换,适用于多视频列表场景。

文章目录

动态修改embed标签src属性失效的解决方案

本文详细介绍了一种使用JavaScript动态修改embed标签src属性值的方法,旨在为读者提供实用的参考案例。

在实际开发中,我们常遇到这样的需求:页面上存在多个视频及其对应的链接,用户点击特定链接时,需要在当前页面加载并播放对应的视频内容。

面对这一需求,最直观的思路是直接将embed标签的src属性值更新为被点击链接的href属性值,以此实现视频源的切换。

然而,经过实际测试发现,这种直接修改src属性的方式并未生效。视频播放器依然保持初始状态,始终播放打开页面时加载的第一个视频,无法随点击操作切换。

随后尝试第二种方案:在embed标签外层包裹一个容器标签,通过清空该容器的内部内容,再重新写入新的embed标签代码,期望以此强制刷新视频源。

测试结果表明,这种方法同样未能解决问题,视频播放行为与直接修改src属性一致,依旧无法切换视频。

在此基础上,又尝试了多种类似的DOM操作和属性修改方法,但均未能实现视频源的动态切换。

最终,通过一种变通方法解决了问题:先将embed标签设置为隐藏状态(display:none),然后清空其内容,最后再重新写入新的embed标签代码。经过测试,该方法成功实现了视频链接的动态切换。

具体实现代码如下:


var tabv = document.getElementById("f_tabv");
var tabva = tabv.getElementsByTagName("a");
var tabcv = document.getElementById("f_tab_cv");
tabcv.innerHTML = '<EMBED src="abc.wmv" autostart="true"
width="545" height="325" type="video/x-ms-asf"></EMBED>';
for(var i=0; i<tabva.length; i++){
 tabva[i].onclick=function(){
 var href1 = this.getAttribute("href");
 var href2 = '<EMBED src="'+href1+'" autostart="true"
 width="545" height="325" type="video/x-ms-asf"></EMBED>';
 tabcv.getElementsByTagName("embed")[0].style.display="none";
 tabcv.innerHTML="";
 tabcv.innerHTML=href2;
 for(i=0; i<tabva.length; i++){
  tabva[i].className='';
 }
 this.className = "act";
 return false;
 }
}

希望本文所述的解决方案能对从事JavaScript程序设计的开发者有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章