embed标签动态改变Src的值，局部刷新播放其他视频的javascript方法

Posted 2020-08-31 晨莳c

视频处html代码：

<div id="mod_player" class="mod_player">
    <embed id="evideo" src="http://static.video.qq.com/TPout.swf?vid=d0110upcugq&auto=1" allowfullscreen="true" quality="high" width="650" height="472" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">
</div>

 点击右边列表，左边刷新播放，开始的代码：

$(document).ready(function(){
  //点击右边列表的某个链接，视频播放切换
    $(\'#mod_videolist li\').find(\'a\').each(function(i, elem){
        $(this).click(function(){
           $(\'#mod_player > embed\').attr(\'src\', $(this).attr(\'href\'));
           return false;
        });
      //document.getElementById(\'evideo\').play();
     });
});

这样只能切换embed的src值，但并不会切换播放（奇怪firefox能够切换播放，其它浏览器只能改变了src），就是没有触发视频的play动作，但因为不是html5的<video>标签，embed标签无法用js传入play()方法，所以只能想别的方法，如下：

 $(document).ready(function(){
    //点击右边列表的某个链接，视频播放切换
    $(\'#mod_videolist li\').find(\'a\').each(function(i, elem){
       $(this).click(function(){
           $(\'#mod_player > embed\').remove();
           var str = \'<embed id="evideo" src="\'+ $(this).attr(\'href\') +\'" allowfullscreen="true" quality="high" width="650" height="472" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">\';
           $(\'#mod_player\').html(str);
           return false;
        });
    });
});

通过“摧毁”embed，然后再改变embed的src的动态值，重新生成embed,这样就能兼容所有浏览器了。