.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>


相关文章推荐

html5 <video>播放mp4格式视频没有图像的解决办法

本文主要介绍在html中引用video标签,没有图像的解决办法。

html5的video标签插入mp4视频放在iis服务器访问无法播放解决方案

现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) 原因:IIS的MIME中...
  • b671900
  • b671900
  • 2016年01月17日 10:46
  • 9637

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

websocket(二)--简单实现网页版群聊

websocket可以实现服务端的消息推送,而不必在客户端轮询,大大的节省的资源,对于实时通讯来说简直是个大喜讯。 在上一篇文章中介绍了协议握手,这篇文章将通过实现简单的群聊来帮助进一步了解webs...

Android 内置浏览器不支持webSocket解决方案

为了实现移动客户端实时通信,拟采用安卓webview内嵌html实现方式开发app,通信则采用最新的html5新特性websocket实现。经测试,android4.0以下内置浏览器都不支持webso...
  • wabil
  • wabil
  • 2015年12月09日 15:55
  • 3371

asp.net mvc 之路:静态与伪静态页面的切换

mvc的静态页面和动态页面的热切换

ASP.NET生成静态页面

  • 2007年11月24日 10:17
  • 10KB
  • 下载

使用asp.net模板生成html静态页面的五种方案

使用asp.net模板生成html静态页面的五种方案 使用asp.net模版生成html静态页面并不是难事,主要是使各个静态页面间的关联和链接如何保持完整。本文介绍了使用asp.net模版生成h...

asp.net模板生成静态页面

  • 2008年09月10日 14:10
  • 5KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:.net mvc 页面(静态页面)播放 .264格式视频文件
举报原因:
原因补充:

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