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

公司做监控的，用海康威视，视频保存后切割成 .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.d
4000
etachEvent) {
// 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>