页面上的视频插入:使用javascript和flash

  1. 作者
  2. x64(又名andi)

前段时间我提到了视频标签,专门用html5实现。 然而,不幸的是,标签的使用会带来更多的不便而不是好处。 因此,我会告诉你如何完全使用一种视频格式。  对于一个项目,我需要找到在网站上拧下视频的可能性。 不可能在闪存上从头开始制作播放器(首先,我没有开发环境并且没有提供它),所以事实上,有必要在面对flash播放器时找到合适的候选者。 没有什么特别复杂的要求,因为感谢YouTube用户很容易在这类播放器中导航;)   2位候选人位于网站flv-mp3

前段时间我提到了视频标签,专门用html5实现。 然而,不幸的是,标签的使用会带来更多的不便而不是好处。 因此,我会告诉你如何完全使用一种视频格式。

对于一个项目,我需要找到在网站上拧下视频的可能性。 不可能在闪存上从头开始制作播放器(首先,我没有开发环境并且没有提供它),所以事实上,有必要在面对flash播放器时找到合适的候选者。 没有什么特别复杂的要求,因为感谢YouTube用户很容易在这类播放器中导航;)

2位候选人位于网站flv-mp3.com(来自uppod'a的一个项目)和 的Flowplayer 。 每个人都做了一个小捅,第一个被迅速放弃,转而使用提供现有api的联合收割机。 随着时间的推移,内心的直觉并没有让我失望(虽然有些人设法进入vtyuhat flv-mp3.com)。

如您所知,第一印象相当具有欺骗性,有时会优先考虑最不饱和的设备(特别是如果它使用本地语言)。 正是这种方法需要flv-mp3:该服务提供了“组装”具有特定特征的玩家的机会( 形式 指示正在播放的文件,屏幕保护程序,尺寸和一些其他参数)并获取输出代码以插入文件。 是的,这个选项看起来非常方便,特别是对于那些认为html是强大女巫的人,更不用说js等了。

只有定期添加视频到网站不太可能有助于自己不断“构建”播放器的热情。 或者,您可以浏览所有设置并通过服务器语言自动执行。 但这个原则只能被称为扭曲(在YouTube上加载视频并获得准备好的下载代码要容易得多)。

在这里,我们来到了已经完全被称为女巫的事情。 你想领悟javascript魔术吗? 我将证明它并不困难(甚至比使用构造函数更容易)。 并帮助这个流程。 你可以选择一个版本 从这里开始 ,但在GPL3下分发的第一个版本非常适合您的网站。

播放器支持播放以下内容:flv,mp4,m4v(适用于图像 - jpg,gif,png)。 从版本9开始支持该视频,因此不存在任何支持问题。

使用播放器下载存档并解压缩。 您需要将3个文件上传到站点: flowplayer.controls-NumVer.swfflowplayer-NumVer.swfexample / flowplayer-NumVer.min.js ,其中NumVer只是版本号,例如,可能是3.2.7

第一个文件包含控制面板,第二个文件包含播放器,第三个文件包含提供api的链接。 前两个文件(* .swf)必须位于同一文件夹中。 现在是最简单代码的时候了。 它可能是:

<div id =“player”style =“width:640px; height:480px;”> </ div> <script type =“text / javascript”src =“/ src / player / flowplayer-3.2.6.min.js “> </ script> <script type =”text / javascript“> flowplayer('player','/ src / player / flowplayer-3.2.7.swf',{}); </ script>

具有播放器ID的div元素是视频将被拧开的容器。 在第二行是javascript文件连接。 直接输出负责一个函数flowplayer() ,它传递3个参数:

  1. 应播放视频的元素的标识符;
  2. 播放器的路径(即播放器,而不是自动加载的控件);
  3. 一些额外的参数。

顺便说一句,除了标识符之外,您还可以直接将引用传递给对象或选择器。

上面的代码没有显示任何内容,但它提供了将流程图连接到页面是多么容易的想法。 要输出视频,您需要创建第三个参数,顺便说一下,这也非常简单。

为简单起见:第三个参数(config)是一个关联数组,其中可以描述以下元素:

  • 剪辑 - 使用此键,您可以“制作”全局设置,例如,是否要自动开始缓冲(自动缓冲)或播放(自动播放),如何缩放内容(使用适合值缩放将保持原始宽高比,并且对于普通视频将使用,也许只有它)。 您还可以指定正在播放的文件(url),甚至暂停事件(将被调用的功能,例如,当电影开始播放时);
  • 播放列表是一个常规数组(列表)。 每个元素可以是一个字符串(在这种情况下,字符串是正在播放的剪辑的地址),或者是一个关联数组。 在第二种情况下,数据集可以被视为类似于前一项的剪辑键的数据集,即您可以指定使用缓冲,开始播放等等;
  • 插件 - 用于扩展标准功能。 其中一个功能是能够立即对接口进行俄罗斯化。

现在举个小例子,展示各种可能性:

<div id =“player”style =“width:520px; height:330px;”> </ div> <script type =“text / javascript”src =“/ src / player / flowplayer-3.2.6.min.js “> </ script> <script type =”text / javascript“> flowplayer('player','/ src / player / flowplayer-3.2.7.swf',{clip:{autoPlay:false,autoBuffering:false,scaling :'fit'},播放列表:[{url:'https://a-panov.ru/wp-content/uploads/2011/flowplayer.jpg',autoBuffering:true,autoPlay:true},'http:// pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv'],//操纵插件控件:{controls:{url:'flowplayer.controls-3.2.16.swf',播放列表:false ,//删除倒带按钮stop:true,//添加停止按钮scrubber:true // false禁用滚动视频}}}); </ script>

显示的代码将以下内容设置为全局设置:禁用自动开始播放,禁用自动缓冲,缩放视频以适应窗口。 作为可播放文件,使用图片和视频,并覆盖图片的设置(因为它应自动加载)。 当您单击图片(或播放按钮)时,将显示视频。 如你所见,一切都很简单。 如果要添加其他视频片段,只需将新项目添加到播放列表,用逗号分隔即可。 如果需要自动播放播放列表,则在设置关联数组剪辑时 ,autoPlay的值设置为true。

包含api函数的文档位于 这里 。 如果有人不懂英语 - 没关系,那里的一切都很清楚。 在分析上面的代码之后,很有可能理解码头中的内容。 我强烈推荐一看,肯定会有一个需要的“设置”。

例子可以 看这里 。 别忘了查看源代码(Ctrl + U)

作者

离线1周

x64(又名andi)

评论:2842出版物:395注册:02-04-2009