.net mvc 页面(静态页面)播放 .264格式视频文件

原创 2016年05月31日 15:56:59

公司做监控的,用海康威视,视频保存后切割成 .264格式文件,将地址保存入数据库,我的任务是将它分类读取出来。


首先前去下载 VLC播放器:http://www.videolan.org/vlc/index.html

好顶赞的播放器,开源,轻巧,强大。安装时记得勾选IE插件和FireFox插件!


我本地配置了简易网站用于视频网络路径测试,切记,切记:网站配置MIME类型,新增 .264   video/mp4,否则播放器会卡住


脚本:Q_JcVideo.js

function handleMediaPlayerMediaChanged() {
    //document.getElementById("info").innerHTML = "Media Changed";
}

function handle_MediaPlayerNothingSpecial() {
    //document.getElementById("state").innerHTML = "Idle...";
}

function handle_MediaPlayerOpening() {
    //onOpen();
}

function handle_MediaPlayerBuffering(val) {
    //document.getElementById("info").innerHTML = val + "%";
}

function handle_MediaPlayerPlaying() {
    //onPlay();
}

function handle_MediaPlayerPaused() {
    //onPause();
}

function handle_MediaPlayerStopped() {
    //onStop();
}

function handle_MediaPlayerForward() {
    //document.getElementById("state").innerHTML = "Forward...";
}

function handle_MediaPlayerBackward() {
    //document.getElementById("state").innerHTML = "Backward...";
}

function handle_MediaPlayerEndReached() {
    //onEnd();
}

function handle_MediaPlayerEncounteredError() {
    //onError();
}

function handle_MediaPlayerTimeChanged(time) {
    //    var vlc = getVLC("vlc");
    //    var info = document.getElementById("info");
    //    if (vlc) {
    //        var mediaLen = vlc.input.length;
    //        if (mediaLen > 0) {
    //            // seekable media
    //            info.innerHTML = formatTime(time) + "/" + formatTime(mediaLen);
    //        }
    //    }
}

function handle_MediaPlayerPositionChanged(val) {
    // set javascript slider to correct position
}

function handle_MediaPlayerSeekableChanged(val) {
    //setSeekable(val);
}

function handle_MediaPlayerPausableChanged(val) {
    //setPauseable(val);
}

function handle_MediaPlayerTitleChanged(val) {
    //setTitle(val);
    //document.getElementById("info").innerHTML = "Title: " + val;
}

function handle_MediaPlayerLengthChanged(val) {
    //setMediaLength(val);
}

//function autoHeightWidth() {
//    $("#divright").width($(window).width() - 210);
//    $(".layout1").height($(window).height());
//    $("#video").height($(window).height());
//    $("#vlcplayer").height($(window).height() - 20);
//    $("#vlcplayer").width($(window).width() - 220);
//}
//window.onresize = function () { autoHeightWidth(); };


window.onload=function() {
    init();
}
window.onunload=function() {
    close();
}

function PlayVideo(url) {
    var vlc = getVLC("vlcplayer"); //document.getElementById("vlcplayer");
    
    vlc.playlist.items.clear();
    var options = [":rtsp-tcp"];
    var itemId = vlc.playlist.add(url, "", options);
    options = [];
    
    if (itemId != -1) {
        // play MRL
        vlc.playlist.playItem(itemId);
    }
    else {
        alert("播放失败");
    }
    //$("#content").attr("src", "Video.aspx?url=" + url);
    //$("#HidVideoUrl1").val("");
}

function getVLC(name) {
    if (window.document[name]) {
        return window.document[name];
    }
    if (navigator.appName.indexOf("Microsoft Internet") == -1) {
        if (document.embeds && document.embeds[name])
            return document.embeds[name];
    }
    else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
    {
        return document.getElementById(name);
    }
}

function init() {
    if (navigator.appName.indexOf("Microsoft Internet") == -1) {
        onVLCPluginReady()
    }
    else if (document.readyState == 'complete') {
        onVLCPluginReady();
    }
    else {
        /* Explorer loads plugins asynchronously */
        document.onreadystatechange = function () {
            if (document.readyState == 'complete') {
                onVLCPluginReady();
            }
        }
    }
}

function onVLCPluginReady() {
    registerVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
    registerVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
    registerVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
    registerVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
    registerVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
    registerVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
    registerVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
    registerVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
    registerVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
    registerVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
    registerVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
    registerVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
    registerVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
    registerVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
    registerVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
    registerVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
    registerVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
}

function close() {
    unregisterVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
    unregisterVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
    unregisterVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
    unregisterVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
    unregisterVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
    unregisterVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
    unregisterVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
    unregisterVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
    unregisterVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
    unregisterVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
    unregisterVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
    unregisterVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
    unregisterVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
    unregisterVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
    unregisterVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
    unregisterVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
    unregisterVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
}

function registerVLCEvent(event, handler) {
    var vlc = getVLC("vlcplayer");

    if (vlc) {
        if (vlc.attachEvent) {
            // Microsoft
            vlc.attachEvent(event, handler);
        } else if (vlc.addEventListener) {
            // Mozilla: DOM level 2
            vlc.addEventListener(event, handler, true);
        } else {
            // DOM level 0
            eval("vlc.on" + event + " = handler");
        }
    }
}

function unregisterVLCEvent(event, handler) {
    var vlc = getVLC("vlcplayer");

    if (vlc) {
        if (vlc.detachEvent) {
            // Microsoft
            vlc.detachEvent(event, handler);
        } else if (vlc.removeEventListener) {
            // Mozilla: DOM level 2
            //vlc.removeEventListener(event, handler, true);
        } else {
            // DOM level 0
            eval("vlc.on" + event + " = null");
        }
    }
}



页面(.net MVC ,忽略逻辑,普通html即可直接调用):

<script type="text/javascript">
    $(function () {
        initVlcPlayer();
    });

    function showVideoInRight(obj,ksxm,kfxm) {
        $("#tableVideo").find("td").removeClass("selectTd");
        $(obj).parent().removeClass("selectTd").addClass("selectTd");
        
        var jsn = eval('@Html.Raw(videoJson)');
        if (jsn == undefined || jsn == "" || jsn == null) {
            $("#tdVideoPart").html("无视频信息");
            return;
        }
        $("#tdVideoPart").html("");
        
        for (var i = 0; i < jsn.length; i++) {
            if (jsn[i].ksxm==ksxm || jsn[i].ksxm == kfxm) {
                var remoteFileName = jsn[i].remotefilename;
                var localFileName = jsn[i].localfilename;
                initVlcPlayer();

                var path = $("#hidVideoUrl").val() + remoteFileName;
                var localpath = "file:///" + localFileName;
                
                //测试
                //localpath = "file:///E:/驾校考试项目/视频播放测试/videos/B1_0322.264";//本地
                //PlayVideo(localpath);
                //return;

                //正式
                path = "http://192.168.1.119:84/videos/B1_0322.264";
                PlayVideo(path);//播放web视频
                //PlayVideo(localpath);//播放本地视频  
                
                return ;
            }
        }
        $("#tdVideoPart").html("无视频信息");

    }

    function initVlcPlayer() {
        var ww = "600px";
        var hh = "400px";
        //var explorer = navigator.userAgent;
        //ie
        if (!!window.ActiveXObject || "ActiveXObject" in window) {//explorer.indexOf("msie") >= 0  //不兼容ie11
            var oFlash = $('<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" style="width:'+ww+'; height:'+hh+';" id="vlcplayer" events="True">'
                + '<param name="MRL" value="" />'
                + '<param name="ShowDisplay" value="True" />'
                + '<param name="AutoLoop" value="False" />'
                + '<param name="AutoPlay" value="False" />'
                + '<param name="Volume" value="50" />'
                + '<param name="toolbar" value="true" />'
                + '<param name="StartTime" value="0" />'
                + '</object>');

            $("#tdVideoPart").html("").append(oFlash);
        } else {
            var embed = $('<embed type="application/x-vlc-plugin" id="vlcplayer" width="'+ww+'" height="'+hh+'" autoplay="no" loop="yes" pluginspage="http://www.videolan.org" target="">');

            $("#tdVideoPart").html("").append(embed);
        }
        $("#tdVideoPart #vlcplayer").css({
            width: ww,
            height: hh
        });
    }
</script>

<input type="hidden" id="hidVideoUrl" value="http://192.168.1.119/hkvideo/" />

<table id="tableVideo" class="H_table" style="width:100%;height: 100%;">
    @{
        var itemList = ViewBag.ExamItemList as List<ExamItemViewModel>;
        if (itemList != null && itemList.Any())
        {
            for (int i = 0; i < itemList.Count; i++)
            {
                <tr>
                    <td class="H_td1" style="text-align:left;min-width:120px;">
                        <a href="#" class="easyui-linkbutton " onclick="showVideoInRight(this,@itemList[i].ksxm,'@itemList[i].kfxm')">
                            <span class="icon icon-video"></span>
                            @itemList[i].ksxmStr
                            @if (!string.IsNullOrEmpty(itemList[i].kfxm))
                            {
                                <span>(扣分代码:@(itemList[i].kfxm))</span>
                            }
                        </a>
                    </td>
                    @if (i == 0)
                    {
                        <td align="center" rowspan="@itemList.Count" id="tdVideoPart">
                            
                            @*<embed type="application/x-vlc-plugin" id="vlcplayer"
                                   width="600"
                                   height="400"
                                   autoplay="no"
                                   loop="yes"
                                   pluginspage="http://www.videolan.org" target="">*@

                            @*<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" style="width:100%; height:100%;" id="vlcplayer" events="True" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
                                <param name="MRL" value="" />
                                <param name="ShowDisplay" value="True" />
                                <param name="AutoLoop" value="False" />
                                <param name="AutoPlay" value="False" />
                                <param name="Volume" value="50" />
                                <param name="toolbar" value="true" />
                                <param name="StartTime" value="0" />
                                
                            </object>*@
                            
                            

                        </td>
                    }
                </tr>
            }
                
        }
    }
        
</table>


MVC+WCF实现视频播放的顶和踩功能

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码...
  • zhangzijiejiayou
  • zhangzijiejiayou
  • 2015年02月16日 09:00
  • 1889

H5新属性audio音频和 video视频的控制详解(controls)

1.音频(audio) 2.视频(video)   静音  打开声音  播放  停止播放  全屏  下面是对于视频文件的控制; javascript引出。 ...
  • z69183787
  • z69183787
  • 2016年10月11日 18:23
  • 4054

Asp.net MVC4 中的视频上传和视频截图,以及删除上传文件

这两天在做一个视频上传的同时,给视频截张图。百度搜索了很多,总结了一个适合自己。废话不说了,如下: Controller中的代码: //视频上传 public ActionResult videoAd...
  • lp1791803611
  • lp1791803611
  • 2014年12月23日 14:32
  • 2012

asp.net mvc中实现视频自动上传

在视频上传这儿做了好长时间,想了很多办法。因为想做的是当点击图标的时候就让视频自动开始上传不需要点提交按钮,而上传控件file需要点击提交按钮之后才能上传。         ...
  • u010858791
  • u010858791
  • 2015年01月30日 23:44
  • 1989

Matlab处理视频文件1

接下来我打算用几篇博客写关于matlab视频处理相关的内容首先,在读取视频文件方面,前期matlab只能用aviread,但其支持的视频文件编码有限,我用的视频读取函数为VideoReader(文件路...
  • u010510134
  • u010510134
  • 2016年03月03日 22:04
  • 1299

.net 页面加载视频

要求: MP4 格式的 视频 添加到页面,页面打开加载 1.iis 中方式视频文件 本地打开       浏览器 提示 错误:         HTTP 错误 404.3 - Not Found ...
  • sage425
  • sage425
  • 2017年05月26日 11:48
  • 191

ASP.NET ZERO 学习 —— (3) 开发手册之介绍和MVC 应用前端

介绍解决方案结构(层)在解决方案里面一共有7个项目 - Core 领域模型层(如实体和领域服务) - Application 应用逻辑层(如应用服务和DTO) - EntityFramework...
  • alistair_chow
  • alistair_chow
  • 2017年02月24日 14:20
  • 2500

c# MVC例子学习必看 一个简单的.NET MVC 实例

久闻MVC的大名,只是一直没有去研究过。过去自己用的最多的还是.NET WebForm,比较习惯三层架构。由于最近公司将会使用到MVC框架做一些项目,所以自己也开始接触和学习。看了一些教程,大体搞清楚...
  • Sayesan
  • Sayesan
  • 2015年08月12日 17:51
  • 26099

.net MVC框架下利用CSS+js实现loading效果

继续上一节的话题,http://blog.csdn.net/luanzheng_365/article/details/70348382 动态刷新过程往往需要较多的时间,这期间需要做一个loading...
  • luanzheng_365
  • luanzheng_365
  • 2017年04月22日 16:20
  • 385

asp.net mvc 服务端压缩动态渲染页面利器

原理是配合asp.net mvc 拦截器利用GZipStream压缩服务端页面,有效减少页面传输到前台的数据量 拦截器代码如下 public class CompressFilter : Act...
  • Asa_Jim
  • Asa_Jim
  • 2017年03月22日 10:25
  • 476
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:.net mvc 页面(静态页面)播放 .264格式视频文件
举报原因:
原因补充:

(最多只允许输入30个字)