如何在网页中插入FLV视频,经测试兼容IE、火狐、谷歌等浏览器

标签: 网页 flv 视频 | 发表时间:2014-05-05 15:55 | 作者:崔志军
出处:http://www.iteye.com
之前有个项目需要在后台上传视频,然后在网站前台中播放出来,因为之前插入的视频都是来自优酷、土豆等视频网站,那个方法几乎所有的在线编辑器都自带了,直接复制粘贴地址就搞定了。所以对视频这一块没什么研究,但是实际需求则不是这么简单,你的客户如此说:就是不想把视频传到优酷上!这个时候我们就只能重新写个模块吧。

思路很简单,后台写个上传视频的功能模块。然后在需要播放视频的页面中,调用视频的路径即可。后台上传视频,我们今天先不谈。先保证视频能够在所有的浏览器中播放吧。

找了好多资料,网上一个一个的,你抄我,我抄你,复制来复制去,没几个做过测试的,大部分都不能用,笔者走了两天的弯路,总算得到一个好的解决方案了。现在把它分享了。也加上测试说明,方便后来人。

首先给出思路。网页中可以播放视频,必然要借助某个播放器,这个播放器可以是系统自带的,也可以是浏览器的ActiveX控件。对于使用系统自带的播放器,可以使用quicktime插件,这个比较麻烦,本地需要安装一个quicktime客户端,这个方法虽然可行,但是用户体验不好。用户如果不想安装客户端,一切玩完!

所以,我们不妨使用FLASH方案,比较目前,所有的浏览器都支持FLASH。所以,这个方法大众普遍都很接受,优酷、土豆等在线视频就是使用的FLASH的。

本例播放器使用Flvplayer.swf。播放器在下文的demo文件中。网页中插入代码的如下:

XML/HTML Code复制内容到剪贴板
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="305" height="205"> 
    <param name="movie" value="Flvplayer.swf" /> 
    <param name="quality" value="high" /> 
    <param name="allowFullScreen" value="true" /> 
    <param name="FlashVars" value="vcastr_file=movies/11.flv&LogoText=test&BufferTime=3" /> 
    <embed src="Flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file=movies/11.flv&LogoText=test" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="505" height="405"></embed> 
</object> 
以上代码放在<body></body>中即可。

可以看出这是使用swflash.cab一种ActiveX控件实现的播放效果,其实就是这个:Adobe Shockwave Player 12.0.2.122

vcastr_file=movies/11.flv是你的视频路径。<param name="movie" value="Flvplayer.swf" />  这个value的值表示播放器名称,注意路径的设置。

以上代码,笔者亲自测试,在IE6、IE7、IE8、IE9、IE10、Firefox、Chrome几大浏览器都能正常播放,兼容性近乎完美。

网页中插入FLV视频

但是,这个播放器只能播放FLV格式的视频,其他格式不支持,如果上传的是其他格式的,那么就请写服务器端转码程序转码吧。

附件下载:网页中插入FLV视频DEMO
链接地址:http://www.91ctc.com/article/article-309.html

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [网页 flv 视频] 推荐:

FLV Extract:轻松从FLV文件中分离音频/视频

- 十年恋一人! - 软件志
一、FLV Extract简介: 这款小工具能帮助我们快速地从FLV文件中分离音频/视频,而且官方宣称是无损分离,能将FLV、F4V、PFV以AVI(H.263/FLV1)(VP6/VP6F)(H.264/AVC)视频格式以及MP3,AAC(ADTS标头),WAV(PCM)的音频格式分离输出. 二、FLV Extract安装及简单使用: 1、下载及安装:下载后解压文件到任意文件夹,因为是绿色软件,所以无须安装,直接运行文件夹内的主程序就能启动该软件; 2、从FLV文件中分离音频/视频: 软件操作十分简单,运行软件后,只需要将FLV视频文件拖拽到软件窗口内,对应该文件的视频文件、timecodes文件以及音频文件就会被单独分离出来.

如何在网页中插入FLV视频,经测试兼容IE、火狐、谷歌等浏览器

- - 浏览器 - 互联网 - ITeye博客
之前有个项目需要在后台上传视频,然后在网站前台中播放出来,因为之前插入的视频都是来自优酷、土豆等视频网站,那个方法几乎所有的在线编辑器都自带了,直接复制粘贴地址就搞定了. 所以对视频这一块没什么研究,但是实际需求则不是这么简单,你的客户如此说:就是不想把视频传到优酷上. 这个时候我们就只能重新写个模块吧.

nginx+jwplayer配置flv/MP4点播系统, 视频拖动支持 - 一 水

- - 博客园_首页
下载 nginx 最新版 http://nginx.org/. 安装依赖库, 以ubuntu为例. 编译nginx, 增加flv和MP4的支持.    编译时可以指定安装目录 --prefix=/path/to/install.    然后make install. 测试是否支持seek(拖动, 快进).

Nginx下搭建flv视频服务器且支持视频拖动进度条播放

- gOODiDEA - CSDN博客推荐文章
目前,由于Flash的流行,网络上绝大多数的微视频网站都采用了Flv格式来播放视频. 在互联网上播放视频,有两种方式,一种是文件方式,即通过HTTP协议访问视频文件,这种方式的缺点是不能从特定的帧开始播放;另外一种就是采用专门的流媒体服务器,这种方式的缺点是要搭建复杂的流媒体服务器. 不过,现在有了一种集合了以上两种方式优点的一种解决方案,即通过HTTP来实现伪流媒体.

FLVExtract – 简单易用的 FLV 音视频分离器 | 小众软件 > 媒体工具

- satan - 小众软件
FLVExtract 是一个使用非常简便的针对 FLV 的音视频分离工具,只要将需要分离的 FLV 文件拖进去就可以了,另外程序还有命令行版本,做个批处理和 FileMenu Tools 配合使用效果更棒. 官方网站 | 来自小众软件. ©2011 root for 小众软件 | 原文链接 | 4 留言 | 加入我们 | 投稿 | 订阅指南.

用nginx搭建基于rtmp或者http的flv、mp4流媒体服务器

- - 开源软件 - ITeye博客
这种方式要下载FLV视频文件到本地播放,一旦FLV视频文件下载完成,就不会消耗服务器的资源和带宽,但是拖动功能没有RTMP/RTMP流媒体方式强大,很多视频网站都是用HTTP方式实现的,如:YouTube,土豆,酷6等. 2、  RTMP/RTMP流媒体方式. 这种方式不用下载FLV视频文件到本地,可以实时的播放flv文件,可以任意拖拽播放进度条,但是比较消耗服务器的资源.

如何下载网页上的视频? - 知乎

- -
适用场景:优酷,土豆1080p视频,腾讯视频等. 我比较常用的一类软件,能够进行. 清晰度解析下载,用过很长一段时间了,需要下载视频的就会找到它. 今天发现硕鼠没有以前强大了...以前还能下载优酷视频专辑. 猎影,以前没用过,今天试用了一下,很好用. 能够下载优酷和土豆1080p的视频. 平时代替浏览器下载器使用,有视频和音频嗅探功能,可以下载在线视频,一个好用的地方是:百度.

宅视频:裸

- 小鱼儿 - 宅映像
明天公司组织去贵州走红路,唱红歌,一去就是三天,所以这三天俺估计就没法发博客了,等我被红歌洗脑后回来再给大家继续胸奴吧. 今天要给大家推荐的是一段视频,名字叫《裸》是不是很带感,至于内容,大家看了就知道了. 这段关于女优和AV的故事片是不是相当泪流满面(坑爹啊. 里面竟然没有我们想要的AV镜头,这才真是让我泪流满面).

视频拍立得

- Jing - 设计|生活|发现新鲜
视频拍立得,像经典的Polaroid相机一样,按下快门拍摄一段美好时光,就可以即刻吐出一张可以播放动态视频的“照片”,与亲朋好友一起分享. 这种视频照片包含触摸显示屏、存储单元和微型电池,在摄影完成后的瞬间将数据写入电子相片的存储器. 这听起来很像是哈利波特里魔法城堡里的报纸,但是得益于今日发展迅速的显像技术和超薄电池,也许不久的将来我们就能在市场上看到它.

hold住姐视频

- xiaocaochong - 无聊哦
在2011年8月9日的《大学生了没》中,一位名叫miss lin的网友以夸张另类的造型、一口做作的英语、扭捏妖娆的姿态向大学生们介绍什么是Fashion. 其极度夸张搞笑的表演震撼了所有观众,miss lin的口头禅是“整个场面我要Hold住”. 因此得名“hold住姐”或“hold姐”而蹿红网络.