最近有好几个项目都需要在网页上播放视频文件(自己上传的)，视频格式包括mp4、flv等等。现在的网站都对用户体验有所要求，所以网站上都不是单一的一行行文字了，都会选择放上很多图片、视频等，这样整体看上去就会更有色彩和活力。

最开始的时候网页播放视频采用Object标签来做的，可是这种方式兼容行和易用性都不是很好，容易出现各种无法播放的情况。所以这里我们采用第三方插件来实现播放，这三方插件就是：CuPlayer(酷播) 。

CuPlayer是专门用于网页上播放视频的，有完整的官方文档和各种场景的播放示例效果。在技术上也是非常的成熟，支持各种浏览器和多数的视频文件，这点我们可以通过官方介绍中看到。

CuPlayer具体有以下优点：

兼容性好，支持各种浏览器和运动设备

种视频格式播放支持多种视频格式：flv视频/mp4视频/mov视频/f4v视频/3gp视频

支持五种广告功能支持五种广告：前置广告/视频广告/暂停广告/角标广告/后置广告

支持ASP/PHP/JSP和.NET等程序完美支持ASP、PHP、JSP和.NET程序，可以实现直接调用数据库中的各项播放器参数

更多请查看官方网站介绍 ……

项目运用

1、下载官方的插件文件，官方下载页面

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

3、在页面上使用播放器插件。下面是我完整的前台页面代码，注意项目是webform。

前台页面代码：

XHTML

html>

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", ""); //视频文件地址

so.addVariable("CuPlayerImage", "");//视频略缩图,本图片文件必须正确

so.addVariable("CuPlayerWidth", "600"); //视频宽度

so.addVariable("CuPlayerHeight", "410"); //视频高度

so.addVariable("CuPlayerAutoPlay", "no"); //是否自动播放 yes 是， no 不是

so.addVariable("CuPlayerLogo", ""); //Logo文件地址  注释该行和下面的一行将不会显示logo

so.addVariable("CuPlayerPosition", "top-right"); //Logo显示的位置

so.write("CuPlayer");

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

html>

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", ""); //视频文件地址

so.addVariable("CuPlayerImage", "");//视频略缩图,本图片文件必须正确

so.addVariable("CuPlayerWidth", "600"); //视频宽度

so.addVariable("CuPlayerHeight", "410"); //视频高度

so.addVariable("CuPlayerAutoPlay", "no"); //是否自动播放 yes 是， no 不是

so.addVariable("CuPlayerLogo", ""); //Logo文件地址  注释该行和下面的一行将不会显示logo

so.addVariable("CuPlayerPosition", "top-right"); //Logo显示的位置

so.write("CuPlayer");

后台项目代码：

C#

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

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

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等文件的配置

发布者：柚子，转转请注明出处：https://ityouzi.com/archives/web-cu-player.html