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秒左右的视频之后,就能成功播放,这可能与在线播放视频的要求高有关。

转载自 https://www.cnblogs.com/gogoSpace/p/4189813.html