码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-02-13 10:46:35      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:列表   image   sharp   eol   str   class   doc   视频   list   

技术分享

视频处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,这样就能兼容所有浏览器了。

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

标签:列表   image   sharp   eol   str   class   doc   视频   list   

原文地址:http://www.cnblogs.com/cxx328/p/6392751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!