视频网站内容(视频网站制作使用Flex和PHP创建自己的视频应用(图))

优采云 发布时间: 2021-11-25 14:04

  视频网站内容(视频网站制作使用Flex和PHP创建自己的视频应用(图))

  flv video 网站 利用Flex和PHP创建自己的视频应用英文原文:Creating MyTube with Flex and PHP 原文地址:/pub/a/php/ ... h-flex-and-php.html原作者:Jack Herrington 随着宽带的普及,硬盘空间价格的不断降低,以及 Adob​​e® Flash® Player 和 Flash Video 的实用性,视频共享在互联网上的火爆也就不足为奇了。像谷歌视频和YouTube这样的网站是佼佼者,现在到处都是小视频分享网站。那么,我们怎样才能加入这个趋势呢?如何使用 PHP、Flash 和 Adob​​e Flex 等技术?创建自己的视频共享网站?去吧,这比你想象的要容易。本文将告诉你如何创建网站的PHP部分 以及如何使用 Flex 框架创建视频播放器。要创建一个简单的 YouTube 版本(我们可以称之为 MyTube),您需要有一些合适的工具。在服务器端,你需要 PHP 和 MySQL。MySQL 用于存储有关视频的数据(例如视频的文件名、缩略图、缩略图的高度和宽度、标题和描述)。

  PHP 将完成对页面(包括 HTML 和 XML 页面)进行格式化的工作,具体取决于您希望如何进行。您还需要一个开源软件:ffmpeg,它可以将用户上传的任何格式的视频文件转换为 Flash Video 文件(FLV)。当您向用户显示可用视频列表时,ffmpeg 软件还可以生成视频特定帧的缩略图。毫无疑问,ffmpeg 将是您在视频共享领域的最佳助手。它是一款极其出色的软件,功能强大、易于使用且文档齐全。在客户端,有多种不同的用户界面可供选择。第一个是类似于 YouTube 的 HTML/Flash 的混合用户界面,另一个是完全基于 Flash 的用户界面。这里我选择了Flex框架来创建Flash程序。该程序首先播放视频,然后列出可用视频列表并提供导航。在创建 PHP 后端创建后端程序之前,必须先在 MySQL 中建立一些数据库模式。一、创建数据库,可以使用mysqladmin命令行: 将内容复制到剪贴板 代码:mysqladmin create movies 完成后,将schema加载到数据库中。模式文件的内容如下:movies.sql 将内容复制到剪贴板代码:DROP TABLE IF EXISTS movies; 创建表电影(movieId INTEGER NOT NULL AUTO_INCREMENT, title VARCHAR( 255 ), source VARCHAR( 255 ), thumb VARCHAR( 255 ), width INTEGER, height INTEGER, PRIMARY KEY( movieId) );要将数据添加到数据库,您需要开发一个HTML上传页面,它可以上传视频,将视频转换为Flash Video,

  创建上传页面。其实创建一个上传视频的HTML页面很简单,如下: addmovie.html 复制内容到剪贴板 代码:这个页面的形式提交到upload.php页面,upload.php会对视频进行处理并抓取缩略图 并将数据添加到数据库中。页面代码如下:upload.php 复制内容到剪贴板 代码:文件成功上传 函数flv_import()是脚本代码的核心部分,调用converttoflv()函数和getthumbnail()函数进行转换将视频转换为 Flash 视频文件并创建它的缩略图。然后它将有关视频的一些数据添加到数据库中。FLV和缩略图相关的功能都是使用ffmpeg中的命令行来处理视频的。打开addmovie.html页面的时候截图了,如图1. 图1. 上传视频页面 现在您可以点击上传按钮将视频上传到服务器进行处理。upload.php 页面中的脚本只是一些非常基本的代码。如果要投入使用,需要添加一些错误验证码。这些脚本的最大问题是无法处理更大的视频文件。

  较大的视频文件需要很长时间才能转换,用户也需要等待很长时间。为了能够支持大的视频文件(比如时长超过10秒的视频),我建议你直接把视频拷贝到一个文件夹中,然后通知用户视频稍后会出现在网站上。然后您可以编写一个脚本来处理该文件夹中的视频。这里我觉得有必要说明一下为什么视频要转为Flash Video。当然,我需要使用 Flash Video 来观看 Flash Player 中的视频。但不仅如此,如果我不转换它,我会显示每个视频的播放器是什么,并帮助用户找到并安装适合他们系统的播放器。这将需要大量的工作。将所有视频转换为 Flash Video 的最大优势——也是用 Flex 编写的 Flash Player 的最大优势——是它几乎可以在任何地方运行。下一步是创建一个类似于 YouTube 的简单 HTML/Flash 界面。创建 HTML/Flash 界面 在 Adob​​e Flex Builder 中创建一个新的 Flex 项目?2、然后创建一个Flash视频,这个视频通过给定的URL找到视频并播放。我们将这个 Flex 应用程序文件命名为 simplemovie.mxml,代码如下: simplemovie.mxml 将内容复制到剪贴板代码:这个简单的 Flex 程序由两部分组成:一个用于播放视频的 VideoDisplay 组件和一个播放按钮。播放完成后,用户可以点击按钮重新开始播放。VideoDisplay 组件有一个 source 属性,其中收录视频 FLV 文件的 URL 地址。这里,

  ">

  在上面的代码中,第一步是连接数据库并获取视频列表。然后开始查找是否有与URL中的ID匹配的视频ID。如果有匹配的视频ID,它会将此ID分配给movie变量,并通过flashVars参数传递给simplemovie.swf文件。接下来,在HTML代码中创建一个and标签来嵌入simplemovie.swf,标签中也提供了正确的视频URL地址。然后我创建了所有可用视频的列表。此列表中的每一项都提供了相应视频的正确 ID 和指向此页面的链接。在浏览器中运行这个页面的结果如图2所示: 图2. 简单的视频播放器和视频列表 当我打开页面时,第一个视频开始播放。当我在右侧列表中选择一个视频时,页面将重新加载并播放所选视频。是不是很简单?一个Flex文件,一个PHP文件加上后台的一点数据库操作,哇!视频分享网站出现了!接下来我们将在 Flex 中做一些工作来增强用户体验。Flex 界面,第一部分 如果要让 Flex 播放视频,则必须向 Flex 程序提供视频列表。最简单的方法是通过 XML。所以,现在我们要回到 PHP 部分,编写一个页面,可以将数据库中的视频列表提取到 XML 文件中。您必须向 Flex 程序提供视频列表。最简单的方法是通过 XML。所以,现在我们要回到 PHP 部分,编写一个页面,可以将数据库中的视频列表提取到 XML 文件中。您必须向 Flex 程序提供视频列表。最简单的方法是通过 XML。所以,现在我们要回到 PHP 部分,编写一个页面,可以将数据库中的视频列表提取到 XML 文件中。

  void {var firstMovie: String = event.result.movi​​es.movi​​e[0]。source.toString(); videoPlayer.source = firstMovie; 电影 = event.result.movi​​es.movi​​e; movieList.selectedIndex = 0;} public function onPrevious(): void {if (movieList.selectedIndex == 0) movieList.selectedIndex = movies.length-1;else movieList.selectedIndex -= 1;videoPlayer.source = this.movi​​eList. selectedItem.source.toString();} public function onPlay(): void {videoPlayer.source = this.movi​​eList.selectedItem .source.toString();videoPlayer.play();} public function onNext(): void {if ( movieList.selectedIndex >= (movies.length-1)) movieList.selectedIndex = 0;else movieList.selectedIndex += 1 ;videoPlayer.source = this.movi​​eList.selectedItem.source.toString();} public function onChange(): void {videoPlayer.source = this.movi​​eList.selectedItem.source.toString();} >" /> 明显的变化就是在页面的上半部分增加了很多ActionScript代码,用于管理interface.source = this.movi​​eList.selectedItem.source.toString();videoPlayer.play();}公共函数 onNext(): void {if (movieList.selectedIndex >= (movies.length-1)) movieList.selectedIndex = 0; else movieList.selectedIndex += 1;videoPlayer.source = this.movi​​eList.selectedItem.source.toString();} public function onChange(): void {videoPlayer.source = this.movi​​eList.selectedItem.source.toString();} >" /> 明显的变化是页面上半部分添加了很多ActionScript代码来管理界面。source = this.movi​​eList.selectedItem.source.toString();videoPlayer.play();}公共函数 onNext(): void {if (movieList.selectedIndex >= (movies.length-1)) movieList。选择索引 = 0; else movieList.selectedIndex += 1;videoPlayer.source = this.movi​​eList.selectedItem.source.toString();} public function onChange(): void {videoPlayer.source = this.movi​​eList.selectedItem.source.toString();} >" /> 明显的变化是在页面的上半部分添加了很多 ActionScript 代码来管理 interface.movi​​eList.selectedItem.source.toString();} >" /> 明显的变化是页面上半部分添加了很多ActionScript代码来管理界面.movi​​eList.selectedItem.source.toString();} >" /> 明显的变化是上层添加了很多ActionScript代码页面管理界面的一部分。

  这些代码首先使用HTTPService 从onGetMovies() 中的movies.php 读取XML。当 HTTPService 类检测到 XML 时,它会立即返回一个 XML 文档对象模型(DOM),然后我们就可以使用这个 DOM 读取第一个视频并播放它。函数onGetMovies() 还设置一个movies 变量来存储要在列表框中显示的视频。ActionScript 代码中的其他方法处理界面可能触发的不同事件,例如用户单击视频列表、单击“上一个”或“下一个”按钮等。底部代码是一些构成用户界面的 Flex 组件。有一些按钮 - 向左箭头和向右箭头 - 用于切换到下一个或上一个视频。VideoDisplay右侧有一个视频列表,列表中只列出了视频的名称。使用Flex编译运行程序,结果如图4所示: 图4.第一版Flex用户界面。现在我们可以使用右侧的列表来选择视频,或者通过按向左/向右按钮在视频之间切换。这个程序很不错,但是我们的缩略图用在哪里呢?Flex 界面,添加了两个缩略图部分。要在列表中使用缩略图,您需要对列表进行更改,以便它可以同时显示缩略图及其标题。

  幸运的是,在 Flex 中很容易实现这一点。首先我们需要修改标签添加一个itemRenderer,代码如下: mytube2.mxml 将内容复制到剪贴板代码: ...... 这个itemRenderer是你自己创建的一个MXML组件,并且它的文件名必须是MovieItem。可以通过在菜单中选择New>MXMLComponent来创建一个文件,然后添加如下代码: MovieItem.mxml 将内容复制到剪贴板 代码:我用的是Canvas容器,所以我可以根据自己的定位来定位里面的组件想法 现在,当然,您可以使用最适合您的布局的容器。然后,我使用一个标签来加载图像和一个标签来显示标题。为了使它看起来有趣,我们稍微旋转了图像。最终效果如图5所示。 图片5. 使用缩略图列表框的增强版本。这个外观虽然不是特别好,但是比起简单的写字单要爽多了。接下来,您可以在该组件中添加更多您想要的内容,例如视频描述、运行时间、链接、评级按钮等。存储和带宽虽然建立前端程序和数据库操作比较简单,但这并不是建立视频分享要面临的唯一问题网站。

  目前,带宽是主要问题。这些视频,即使格式是紧凑的 Flash 视频,也是相当大的文件。如何在不耗尽带宽的情况下提供视频服务值得仔细考虑。当然,解决带宽问题的一种方法是购买更大的连接或将主机放在带宽更好的数据中心。另一种选择是将 网站 从数据中分离出来,并将视频文件存储在另一个地方。Amazon 的 S3 服务提供了一种简单的方法,您可以以相对较少的费用以一种过剩且可扩展的方式存储和共享大文件。在早期,使用S3在网站上存储视频文件可以为你节省大量的基础设施成本,并且可以一直使用到网站流行到足以支付基础设施费用为止。总结 随着Flash Video的出现和宽带的广泛普及,以少量费用打造视频分享网站不再是幻想。我希望这个例子可以向您展示使用 Flex/PHP 创建视频共享 网站 是多么容易,并激发您进一步探索。

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线