博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

flash object实现视频播放效果

Posted on 2015-12-11 09:29  人生梦想起飞  阅读(479)  评论(0编辑  收藏  举报

html:

<!--视频缩略图开始-->
       <div class="fresh-media fresh-type-video">
          <div class=" fresh-media-small-img fresh-media-small-video">
              <img src="http://r01.xesimg.com/dynamic/dc6b746db5892f33ecac662ec1baf3d9_small.jpg">
              <a href="javascript:void(0);" class="fresh-video-play"></a>
          </div>
       </div>
       <!--视频缩略图结束-->
       <!--视频大图播放开始-->
       <div class="fresh-media fresh-media-expand fresh-media-expand-video hiding" data-url="http://www.xueersi.com/video/getDynVideo/1989">
       </div>
       <!--视频大图播放结束-->

js:

var fresh = fresh || {};

fresh.media = fresh.media || {};

fresh.media.video = fresh.media.video || {};

fresh.media.video.videoPlay = function(dom){
        var videoBox = $(dom).closest('.fresh-type-video');
        //视频div层显示
        videoBox.next().show();
        //视频缩略图隐藏
        videoBox.hide();//图隐藏
        var url = videoBox.next().data('url');
        var video_html ='<div class="fresh-media-big-video">'
                            + '<p class="fresh-media-packUp"><a href="javascript:void(0);" class="fresh-packUp-video">收起</a></p>'
                            + '<div id="flashcontent" style ="height:408px;">'
                            + '<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="408" width="600"> '
                            + '<param name="movie" value="http://www.xueersi.com/flash/xueersiPlayer.swf" />'
                            + '<param name="quality" value="high" />'
                            + '<param name="wmode" value="opaque" />'
                            + '<param name="allowscriptaccess" value="always">'
                            + '<param name="allowFullScreen" value="true" />'
                            + '<param name="swfversion" value="9.0.115.0" />'
                            + '<param name="FlashVars" value="url='+ url +'/&autoPlay=true" />'
                            + '<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 -->'
                            + '<param name="expressinstall" value="./player/expressInstall.swf" />'
                            + '<!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 --> '
                            + '<!--[if !IE]>-->'
                            + '<object type="application/x-shockwave-flash" data="http://www.xueersi.com/flash/xueersiPlayer.swf" height="100%" width="100%">'
                            + '<!--<![endif]-->'
                            + '<param name="quality" value="high" />'
                            + '<param name="wmode" value="opaque" />'
                            + '<param name="allowscriptaccess" value="always">'
                            + '<param name="allowFullScreen" value="true" />'          
                            + '<param name="swfversion" value="9.0.115.0" />'         
                            + '<param name="expressinstall" value="player/expressInstall.swf" />'
                            +'<param name="FlashVars" value="url='+ url +'/&autoPlay=true" />'
                            +'<!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->'
                            +'<div>'
                            +'<h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>'
                            +'<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" height="33" width="112" /></a></p>'
                            +'</div>'
                            +'<!--[if !IE]>-->'
                            +'</object>    '       
                            +'<!--<![endif]-->'
                            +'</object>'
                          + '</div>'
                        + '</div>';
        videoBox.next().html(video_html);  
    }

点击播放调用函数:

//点击视频小图显示视频大图效果
    $('.fresh-main-wrapper').off('click', '.fresh-type-video .fresh-media-small-video').on('click', '.fresh-type-video .fresh-media-small-video', function(){
        fresh.media.video.videoPlay(this);
    });