`
01jiangwei01
  • 浏览: 542706 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

视频播放相关

阅读更多
参考网页http://linux.cn/home-space-uid-3-do-blog-id-136.html
搭建一个Flv视频播放服务器经过一天的努力,查了好多资料,终于搞定了Flv视频服务器。本来这个事情没那么复杂的,无奈网上的很多资料都是错漏百出,内容脱节的,包括一些官方站也是,实在让人郁闷不已。为了让大家能避免被错误的文档误导,写个简短文章给大家做参考。

目前,由于Flash的流行,网络上绝大多数的微视频网站都采用了Flv格式来播放视频。

在互联网上播放视频,有两种方式,一种是文件方式,即通过HTTP协议访问视频文件,这种方式的缺点是不能从特定的帧开始播放;另外一种就是采用专门的流媒体服务器,这种方式的缺点是要搭建复杂的流媒体服务器。不过,现在有了一种集合了以上两种方式优点的一种解决方案,即通过HTTP来实现伪流媒体。本文描述的就是这样的一种解决方案。

Flv播放器首先,你需要有一个能够播放Flv视频的播放器,很显然,它还需要能够嵌入到网页中。目前比较流行的,功能上也还比较完善的一个Flv播放器就是 JW FLV Media Player(也称为 jwplayer)。它的网址是:

http://www.longtailvideo.com/players/jw-flv-player/

本文写作时,jwplayer的最新版本是4.6。它对于非商业使用是免费。

从上述网址下载jwplayer,输入邮件地址即可下载一个压缩包。

可以考虑下载使用带有 Viral 插件的版本,Viral插件会在视频播放完后,弹出一个窗口,可供浏览者将该视频嵌入到其他网页、发布该视频的URL和推荐该视频,对于推广视频比较有用。

将包中的player.swf(如果是带有Viral插件的,就是player-viral.swf)放到你的网站内,这就是用来提供视频播放的播放器。至于包中其它的文件,都可以不要。

接下来,将播放器嵌入到你的视频播放网页中。嵌入的方式有两种:

直接嵌入,使用Object/Embed代码嵌入:

<object id="player1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player1" width="328" height="200">   
<param name="movie" value="player.swf" />   
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" /> 
<param name="flashvars" value="file=video.flvℑ=preview.jpg&autostart=false&type=http&streamer=start" />
<embed     
type="application/x-shockwave-flash"     
id="player2"   
name="player2"  
src="player.swf"    
width="328"     
height="200"      
allowscriptaccess="always"   
allowfullscreen="true"     
flashvars="file=video.flvℑ=preview.jpg&autostart=false&type=http&streamer=start"    
/>
</object>上面代码中,你需要将video.flv和preview.jpg替换成你的视频文件及其预览图。

基本上这种直接代码嵌入的方式在各种浏览器中都是兼容的。但是,以上代码在IE7+的某些安全设置下,播放Flash时会弹出安全提示,需要手动许可。所以,还有一种更好方式来嵌入,

使用swfobject来嵌入Flash:

swfobject是一个很小的JavaScript脚本(10k),该脚本引入了一个swfobject对象,用于在网页内嵌入Flash,并避免了上述的安全提示。swfobject已经得到了广泛的使用和好评。

swfobject在jwplayer包中也包含了一个,不过是很旧的1.5版,建议使用最新的版本。本文写作时,最新的版本是2.2。swfobject可以从此下载(只需要其中的swfobject.js文件):

http://code.google.com/p/swfobject/

使用swfobject嵌入的代码如下:

<html>
<script type="text/JavaScript" src="swfobject.js"></script>
<head>
<script type="text/JavaScript">
/* <![CDATA[ */
function createPlayer() {   
var flashvars = {      
file:"video.flv",       
type:"http",       
image:"preview.jpg",     
autostart:"false",        
streamer:"start"  
}    
var params = {       
allowfullscreen:"true",        
allowscriptaccess:"always"   
}   
var attributes = {       
id:"player1",        
name:"player1"   
}   
swfobject.embedSWF("player.swf", "placeholder1", "320", "196", "9.0.115", false, flashvars, params, attributes);       
}
/* ]]> */
</script> 
</head>
<body onload="createPlayer();">
   
<div id="placeholder1"></div>
</body>
</html>上述代码中,首先引入swfobject.js,然后将实例化播放器的代码放到head中;在body内放一个空的div用来为播放器占位,该div的ID(上例中是placeholder1)会被传递给swfobject.embedSWF()函数,swfobject会在该div内生成播放器;最后在body的onload事件中进行播放器的创建。

在上述的两种代码中,有两个关键点:

•flashvars中的type参数的值应为“http”,这表明了该视频是通过http方式访问的。
•falshvars中的streamer参数的值应为“start”,这个参数用于传递给服务器从特定的(关键)帧开始播放,没有这个参数,视频就不能拖到特定点播放。(lighttpd和nginx的Flv模块都支持这个start参数)
此外,需要注意的是,如果一个Flv视频要能够被拖到特定点播放,该Flv需要在其metadata中有关键帧的信息。如果你的Flv视频制作的时候没有这些信息,也是不能拖放播放的。可以使用flvmdi来为你的视频加上关键帧信息,这是一个windows下的小程序,从此下载:

http://www.buraks.com/flvmdi/

完成了以上工作,那么客户端的播放器的显示就可以工作了。接下来我们搭建用来提供Flv文件访问的HTTPD服务器。

Flv视频服务器搭建Flv视频服务器,建议采用轻量级的HTTP服务器,毕竟Flv文件只是静态文件。轻量级的HTTP服务器有两种选择:lighttpd和nginx。选择任何一个都可以,在提供Flv服务方面,两者相差不多。

nginx从nginx的网站下载最新的稳定版,本文写作时的最新稳定版的版本是0.7.63:

http://nginx.net/

下载后进行编译,要将“ --with-http_flv_module ” 加上,这个是用来专门提供Flv服务的模块。nginx的编译的其他选项及配置这里就不多说了,只说明一下在配置中如何激活flv模块:

在server配置中,加入如下语句,表明所有的flv文件由flv模块进行处理:
.flv { flv; }lighttpd从lighttpd下载最新的稳定版,本文写作时的最新稳定版的版本是1.4.24:

http://www.lighttpd.net/

下载后编译不需要特定选项,flv模块是默认编译进去的,但是在配置文件中并无此模块,需要手动添加:

在server.modules区块中加入如下语句来激活flv模块(如果不是插入到最后一行,记得末尾的逗号):

."mod_flv_streaming",然后在配置文件中增加如下行来说明所有的Flv文件都由flv模块处理:

.flv-streaming.extensions = ( ".flv" )

说明:在以上两种HTTP服务器中,flv模块实际上会接收通过拖放播出而传递的类似 “?start=1030435” 这样的参数,并根据该参数传递从特定位置开始的视频数据。

这样,Flv视频服务器就安装好了。你可以试试播放Flv视频,也可以看看拖放是否工作。

如果你需要播放mp4视频,基本原理如上,只是需要额外的处理mp4文件的模块,在此就不赘述了。
.本文系wxy原创,版权归wxy及Linux中国所有,转贴请注明。
本文永久地址:http://linux.cn/space/3/blog/136.html
分享到:
评论

相关推荐

    网站视频播放HTML5页面2

    3. **images**:这个文件夹很可能包含了与视频播放相关的图像资源,如播放/暂停按钮的图标、预加载图或者视频截图等。这些图片可以使用CSS来定位和样式化,提升用户体验。 4. **品牌已评测.html**:这可能是一个...

    WPF 视频播放控件

    在描述中提到的"MultiMediaStudio"可能是这个项目的一部分,可能是一个包含视频播放相关组件或服务的库,或者是一个演示如何使用这个控件的示例项目。"新建文本文档.txt"可能包含了项目文档、代码示例或者是配置信息...

    右下角播放弹出视频播放窗口

    "视频"代表这是一个与视频播放相关的技术,而“弹出”则强调了它的交互方式,即在用户界面中以弹出窗口的形式显示。 根据压缩包内的文件名称,我们可以推测其包含以下组件: 1. `16sucai_style.css`:这可能是整个...

    微信小程序、在线视频播放

    此外,微信小程序还提供了视频播放相关的API,如获取视频当前播放进度、播放状态等,可以用来实现更复杂的功能,如进度条拖动、缓冲状态提示等。 在压缩包文件`video-playback-wechat-applet-master`中,可能包含了...

    jsp视频播放jsp视频播放代码和实现

    下面我们将详细探讨JSP视频播放的原理、实现方式以及可能涉及的相关技术。 1. **视频播放原理**: 视频播放主要依赖于浏览器支持的视频标签 `&lt;video&gt;`,这个HTML5元素使得在网页上直接播放视频成为可能。通过设置`...

    视频播放源码

    在"apiVideo"这个压缩包文件中,我们可以推测可能包含了与视频播放相关的API接口或实现代码,可能涉及视频获取、播放控制、解码和渲染等功能。通过深入研究这些代码,开发者可以学习到视频播放器的核心原理,并将其...

    jQuery实现视频播放功能

    你可以通过分析这个文件来学习更深入的jQuery与视频播放相关的技巧。 总之,使用jQuery实现视频播放功能,主要涉及到对HTML5 `&lt;video&gt;`元素的操作,结合jQuery的事件处理和DOM操作,可以创建出功能丰富的视频播放器...

    在线视频播放系统

    在线视频播放系统是一种基于Web技术实现的多媒体服务平台,它允许用户在互联网上浏览、播放、控制视频内容。在这个系统中,我们使用了JSP(JavaServer Pages)和Servlet技术,这两种技术是Java Web开发的核心部分,...

    java网页视频播放

    在Java开发领域,网页视频播放是一项重要的功能,尤其在构建富互联网应用(RIA)时不可或缺。本项目聚焦于在Eclipse环境下集成视频播放插件,为开发者提供了一套完整的源码解决方案,支持视频在网页中的无缝播放。接...

    Vitamio强大的视频播放

    总结来说,Vitamio是一个全面的多媒体解决方案,它的强大功能和广泛支持的格式使其成为Android开发者在构建视频播放相关应用时的首选工具。通过官方提供的Demo和示例代码,开发者可以轻松学习和掌握其使用方法,实现...

    视频播放网站源码

    下面是关于Silverlight、视频播放和网站源码相关的详细知识点: 1. **微软Silverlight**:Silverlight是微软推出的一种插件技术,用于创建和部署互动、丰富的媒体和应用程序,特别是在Web浏览器中。它支持高清视频...

    Qt视频播放代码.zip

    `videoplayer.h`可能会声明`VideoPlayer`类,包含与视频播放相关的成员变量和方法。`playerslider.h`可能定义了`PlayerSlider`类,这是一个自定义的滑动条,提供了与视频播放关联的事件处理。 `videoplayer.ui`文件...

    萝卜视频源码前后端带视频演示更换播放内核到3.2.6.zip

    "视频"指明这是与视频播放相关的项目,"app"表明它是用于构建移动应用程序的,而"苹果cms"可能是指这个项目是基于Apple CMS(一种流行的开源内容管理系统)进行开发的,或者是这个APP可以与苹果CMS系统集成,用于...

    视频播放+列表

    在IT领域,尤其是Web开发中,"视频播放+列表"是一个常见的需求,它涉及到多媒体处理、前端技术以及用户界面设计等多个方面。在这个场景下,HTML页面是实现这一功能的基础平台,我们将围绕这些关键词来深入探讨相关...

    unity 全景视频播放例子

    "unity 全景视频播放例子"这个项目旨在展示如何在Unity中实现360度或全息视频的播放。下面我们将详细探讨相关的知识点。 1. **全景视频基础**: 全景视频是一种捕捉并显示全方位视图的视频形式,允许观众通过移动...

    之前上传的视频解码播放DLL所需视频文件

    "之前上传的视频解码播放DLL所需视频文件"这个标题暗示我们关注的是一个与视频播放相关的动态链接库(DLL)文件,它可能包含了用于解码特定视频格式的函数或组件。DLL文件是一种共享库,可以让多个程序调用相同的...

    安卓直播视频播放流媒体IPCameraRTSPDLNA相关-Android视频播放DEMO视频下方有横向滑动的视频列表.rar

    本项目“安卓直播视频播放流媒体IPCameraRTSPDLNA相关-Android视频播放DEMO视频下方有横向滑动的视频列表.rar”提供了一个包含这些元素的示例应用,旨在帮助开发者学习和理解如何在Android上集成视频流播放功能。...

    dplayer多视频列表播放

    【标题】"dplayer多视频列表播放"是一个针对在线视频播放场景的专业解决方案,它支持多个视频文件的连续播放,能够实现视频列表的自动轮播功能。这个系统允许用户通过URL参数来设定初始播放的视频位置,增加了用户...

    微信小程序如何播放腾讯视频的实现

    此外,由于涉及到网络请求和视频播放,还需要考虑小程序的网络权限以及视频播放相关的权限和接口的使用。 文章中提及的开源项目you-get是一个用于从网页下载视频的Python工具,通过将这部分逻辑转换为JavaScript...

    iOS 视频播放Demo

    在iOS开发中,视频播放是常见的功能之一,尤其在移动应用中,用户对多媒体内容的需求日益增长。这个“iOS 视频播放Demo”提供了一个很好的起点,帮助开发者了解如何在iOS应用中集成视频播放功能。以下将详细讲解相关...

Global site tag (gtag.js) - Google Analytics