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);
});
flash object实现视频播放效果的更多相关文章
- Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果
Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 目前Edge的功能尚 ...
- 如何让Div层悬浮在Flash Object对象之上(转载)
今天有个用户,门户右上角的倒三角登陆小按钮在他的电脑上无法显示,他用的笔记本屏幕较小,宽度正好显示出页面内容,经查看,门户页眉使用的为flash对象. 大家都知道,如果想让某个图片或者Div层悬浮在别 ...
- 仿FLASH的图片轮换效果
css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...
- 使用vcastr22.swf做flash版网页视频播放器
flash的安装设置参考 Flash设置(各种版本浏览器包括低版本IE) 百度搜索下载vcastr22.swf文件 然后使用方式很简单,浏览器安装flash相关插件就能看了 视频路径主要在这里,视频 ...
- Flash AS实现时钟效果(全脚本实现)
最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...
- 常见的仿Flash图片轮播效果
现在基本在很多网站上都能看到轮播效果,虽然有点烂大街的赶脚,但是这个效果确实很好看,很时尚,今天分享下代码相对较少的轮播框架,望采纳 . ①向左滑动: 思路: 将几个图片用分别用几个 li 包住,并且 ...
- 最近比较迷flash professional cc 做PPT,做一个flash做动态打字效果的教程
想做一个flash打字效果.网上的方法要不是太繁琐,要不然就是各种遗漏.在这边做一个行之有效的flash做打字效果教程. 首先我用的是最新版本的flash professional cc .但是应该和 ...
- Html插入Flash.object.embed.swf各个参数值详解介绍[等比例缩放]
http://www.dayku.cn/space-3-do-blog-id-544.html 目也在此列出. Internet Explorer 可识别用于 object 标签的参数:Netscap ...
- JS写一个旋转木马的视频播放效果
JS以及JQ的功能很强大,可以做出很多的优秀效果.今天给大家分享一个我之前写网站用到的旋转木马效果. 大概效果图就是这样的,上面的视频播放是旋转木马效果. 下面的音乐播放效果放在下一篇内容里面讲. 直 ...
随机推荐
- STRTOK函数和STRTOK_R函数
STRTOK函数和STRTOK_R函数 注:本文转载自博客园,感谢作者整理! 1.一个应用实例 网络上一个比较经典的例子是将字符串切分,存入结构体中.如,现有结构体 typedef struct pe ...
- 树莓派进阶之路 (028) - 树莓派SQLite3的安装
MySQL占用内存太大,而SQLite是一款轻量级零配置数据库,非常适合在树莓派和其他嵌入式系统中使用.SQLite文档详细资料丰富,本文不会详细解释SQLite数据库操作的方方面面,只能结合具体场景 ...
- 树莓派SD卡制作,并成功启动
需要条件: 硬件部分: 1.SD卡一张(树莓派支持的) 2.树莓派3 B + 一个(其他的版本也是可以的,这里默3B+). 1.下载树莓派镜像(NOOBS_v1_9_2.zip) wget http: ...
- 如何创建magento模块z之Hello World例子(转)
步骤:1.创建一个Hello World模块2.为这个模块配置路由3.为这个模块创建执行控制器 创建Hello World模块 创建模块的结构目录:app/core/local/Sjolzy/Hell ...
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- OpenCV 学习笔记03 drawContours函数
opencv-python 4.0.1 轮廓的绘制或填充. cv2.drawContours(image, contours, contourIdx, color[, thickness[, li ...
- 初步了解pandas(学习笔记)
1 pandas简介 pandas 是一种列存数据分析 API.它是用于处理和分析输入数据的强大工具,很多机器学习框架都支持将 pandas 数据结构作为输入. 虽然全方位介绍 pandas API ...
- 清理kafka zookeeper
; ; /; rm -rf /app/zookeeper/logs/*; rm -rf /app/pet_kafka_emds2_cluster/kafka-logs/*; rm -rf /app/p ...
- Java批量插入更新操作
以前总是说批量插入和更新的效率比非批量的要高,但是一直没有使用过批量处理数据的功能,现在由于项目中需要处理的数据量比较大,所以使用了批量处理的功能,java代码如下: 1.java实现批量插入数据: ...
- django shortcuts 详解
django中为了方便web的开发.定义了许多有用的shortcut .由于shortcut带来的方便用文字描述是有点苍白的.所以在这里打算用一些例子来说明 一.一个hello world 的例子: ...