码迷,mamicode.com
首页 > 其他好文 > 详细

视频类的嵌法

时间:2015-03-12 12:50:11      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:

一、优酷衔接类

参考例子http://www.mybreeze.com.cn/video.aspx#

技术分享

 

拿到优酷链接地址上的链接代码

技术分享

把代码拿过来放到对应的dom里面

html

<li style="display:;">
                                    <p class="video_pic"><a href="#"><img src="mobile/videoRes/images/page01/video_pic06.jpg" class="video_pic_img" videohtml=‘<iframe  width="640" height="392" src="http://player.youku.com/embed/XODExODg4MzQ4;isAutoPlay=true" frameborder=0 allowfullscreen></iframe>‘ /></a></p>

                                    <p class="desc"><span><img src="mobile/videoRes/images/page01/arrow.png" class="desc_arrow" /></span><span>开启清风“新韧时代”</span></p>
                                    <img src="mobile/videoRes/images/page01/video_play.png" class="video_play" />
                                </li>

js:

$(".video_box ul li .video_pic_img").on("click", function () {
        var _videohtml = $(this).attr("videohtml");
        $(".popupvideo_box_con").html(_videohtml);
        $(".video_popup").show();
    });
    //关闭视频弹出并把视频移除
    $(".video_close").on("click", function () {
        $(".video_popup").hide();
        $(".popupvideo_box_con").html("");
    });

 

 

 

二、视频文件类

 

技术分享

 

技术分享

自动播放设置

方法1.

技术分享

方法2.

技术分享

视频类的嵌法

标签:

原文地址:http://www.cnblogs.com/ruoqiang/p/4331965.html

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