1、首先下载相应的js、css文件。地址在这里http://pan.baidu.com/s/1gdu19Eb。
2、将下载下来的rar文件解压缩。并且引用到你要播放视频的网页中(将此页面命名为webform1.aspx)。如下图。
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="Css/video-js.css" rel="stylesheet" /> <script src="Js/video.js"></script> </head>
3、新建一张html(将此页面命名为video.html)页面,里面仅含有一个video标签。
<video id="{{id}}" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="" data-setup="{}"> <source src="{{src}}" type="video/mp4" /> <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> </video>
4、在webform1.aspx页面中添加一个div。设置成id为“videodiv” runat=“server”。如下图
<body> <form id="form1" runat="server"> <div id="videodiv" runat="server"></div> </form> </body>
5、在webform1.aspx的page_load方法中插入如下代码。
protected void Page_Load(object sender, EventArgs e) { zygzsDataClassesDataContext context = new zygzsDataClassesDataContext(); var res = context.T_Video.First().path; string src = "VideoFolder/" + Path.GetFileName(res); string text = File.ReadAllText(Server.MapPath("~/templates/video.html")); string html = text.Replace("{{id}}", "example_video_1").Replace("{{src}}", "VideoFolder/movie.mp4"); videodiv.InnerHtml = html; }
以上代码理解为在webform1的page_load方法中,获取视频在数据库的路径(这里用了linq to sql),并且赋值给string src。然后读取video.html中的内容,然后将video.html中的“id”替换成“example_video_1"(必须是替换成该id,与引用的css,js相关),“src”属性替换成src(视频路径)。videodiv.InnerHtml属性设置成为经过替换得到string html。
在测试过程中,用了些20mb左右,清晰度比较低的视频,无论用chrome还是ie10+,或者FF,测试均不成功。而换成1080p,200mb,长约5分30秒左右的视频之后,就能成功播放,这可能与在线播放视频的要求高有关。