最近有好几个项目都需要在网页上播放视频文件(自己上传的),视频格式包括mp4、flv等等。现在的网站都对用户体验有所要求,所以网站上都不是单一的一行行文字了,都会选择放上很多图片、视频等,这样整体看上去就会更有色彩和活力。
最开始的时候网页播放视频采用Object标签来做的,可是这种方式兼容行和易用性都不是很好,容易出现各种无法播放的情况。所以这里我们采用第三方插件来实现播放,这三方插件就是:CuPlayer(酷播) 。
CuPlayer是专门用于网页上播放视频的,有完整的官方文档和各种场景的播放示例效果。在技术上也是非常的成熟,支持各种浏览器和多数的视频文件,这点我们可以通过官方介绍中看到。

CuPlayer具体有以下优点:
- 兼容性好,支持各种浏览器和运动设备
- 种视频格式播放支持多种视频格式:flv视频/mp4视频/mov视频/f4v视频/3gp视频
- 支持五种广告功能支持五种广告:前置广告/视频广告/暂停广告/角标广告/后置广告
- 支持ASP/PHP/JSP和.NET等程序完美支持ASP、PHP、JSP和.NET程序,可以实现直接调用数据库中的各项播放器参数
- 更多请查看官方网站介绍 ……

项目运用
1、下载官方的插件文件,官方下载页面
2、将下载的插件添加到项目中。文件中包含JS、测试视频、测试图片和其他相关文件,我这里就过多介绍,具体需要那些文件看下图

3、在页面上使用播放器插件。下面是我完整的前台页面代码,注意项目是webform。
前台页面代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WEB.Index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="CuPlayer/swfobject.js"></script> </head> <body> <form id="form1" runat="server"> <div class="video" id="CuPlayer"> <strong>我爱播放器(52player.com) 提示:您的Flash Player版本过低,请<a href="http://www.52player.com/">点此进行网页播放器升级</a>!</strong> </div> </form> <script type="text/javascript"> var so = new SWFObject("/CuPlayer/CuPlayerMiniV4.swf", "CuPlayerV4", "600", "410", "9", "#000000"); so.addParam("allowfullscreen", "true"); so.addParam("allowscriptaccess", "always"); so.addParam("wmode", "opaque"); so.addParam("quality", "high"); so.addParam("salign", "lt"); so.addVariable("CuPlayerSetFile", "/CuPlayer/CuPlayerSetFile.xml"); //播放器配置文件地址,例SetFile.xml、SetFile.asp、SetFile.php、SetFile.aspx so.addVariable("CuPlayerFile", "<%=this.VideoPath%>"); //视频文件地址 so.addVariable("CuPlayerImage", "<%=this.VideoCoverPath%>");//视频略缩图,本图片文件必须正确 so.addVariable("CuPlayerWidth", "600"); //视频宽度 so.addVariable("CuPlayerHeight", "410"); //视频高度 so.addVariable("CuPlayerAutoPlay", "no"); //是否自动播放 yes 是, no 不是 so.addVariable("CuPlayerLogo", "<%=this.LogoPath%>"); //Logo文件地址 注释该行和下面的一行将不会显示logo so.addVariable("CuPlayerPosition", "top-right"); //Logo显示的位置 so.write("CuPlayer"); </script> </body> </html>
后台项目代码:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WEB { public partial class Index : System.Web.UI.Page { protected string VideoCoverPath = ""; //视频封面图片地址(必须,如果没有封面将导致无法播放) protected string VideoPath = ""; //视频文件地址(必须) protected string LogoPath = ""; //Logo图片地址(可以不要) protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { this.VideoCoverPath = "/Content/start.jpg"; this.VideoPath = "/Content/test.flv"; this.LogoPath = "/Content/Logo.png"; } } } }
运行效果图

源代码下载
注意事项
1、官方播放器版本比较多,这里使用的免费版。
2、建议使用flv格式,MP4格式需要缓冲完成才能开始播放,官方说有方法解决不过他们要收费。
3、注意其他格式转换成flv的时候,视频格式和其他相关设置。
4、如果是播放MP4,需要设置服务器的mime,mp4的mime类型为:application/octet-stream ,具体如何添加百度下。
5、注意控制文件的大小和IIS、web.config等文件的配置
发布者:IT柚子,转转请注明出处:https://ityouzi.com/archives/web-cu-player.html