zoukankan      html  css  js  c++  java
  • flash object实现视频播放效果

    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);
        });

  • 相关阅读:
    免费的编程中文书籍索引【转】
    Linux字符集的查看及修改【转】
    expect学习笔记及实例详解【转】
    mycat学习笔记
    Vue-loader 开启压缩后的一些坑
    使用webpack搭建vue开发环境
    基于webpack和vue.js搭建开发环境
    Sublime Text 3 常用插件以及安装方法(vue 插件)
    NodeJS、NPM安装配置步骤(windows版本)
    Https方式使用Git@OSC设置密码的方式
  • 原文地址:https://www.cnblogs.com/dearxinli/p/5038031.html
Copyright © 2011-2022 走看看