.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.οnlοad=function() {init();
}
window.οnunlοad=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 MRLvlc.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) {// Microsoftvlc.attachEvent(event, handler);} else if (vlc.addEventListener) {// Mozilla: DOM level 2vlc.addEventListener(event, handler, true);} else {// DOM level 0eval("vlc.on" + event + " = handler");}}
}function unregisterVLCEvent(event, handler) {var vlc = getVLC("vlcplayer");if (vlc) {if (vlc.detachEvent) {// Microsoftvlc.detachEvent(event, handler);} else if (vlc.removeEventListener) {// Mozilla: DOM level 2//vlc.removeEventListener(event, handler, true);} else {// DOM level 0eval("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;//ieif (!!window.ActiveXObject || "ActiveXObject" in window) {//explorer.indexOf("msie") >= 0  //不兼容ie11var 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 " οnclick="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>

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

通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api
目前主流浏览器不能直接嵌入并且播放FLV文件,所以直接用video标签播放是行不通的. 因此提供两种解析方法嵌入一个swf媒体播放文件,并利用该文件来播放你预设的文件. 这里推荐dplayer--h ...
微信 html avi视频无法播放,为何MP4不能播放MP4格式视频文件
[海龙资讯网导购]今天早上有个朋友打电话给我说:"喂,现在的商家真是爱骗人啊~!我新买的MP4都不能播放mp4格式的视频."小编我看到这个问题确实也是有点小囧.从正确的命名方法来 ...
Android使用MediaCodec硬解码播放H264格式视频文件
前些时间,通过各种搜索加请教了好几个同行的朋友,在他们的指点下实现: RTSP+H264实时视频播放播放及把实时视频流保存到手机SD卡中,再对保存的H264格式文件进行播放等基本功能.非常感谢这些朋友 ...
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
怎么保存 html静态页面,静态页面怎么实现，就是把数据写入到html页面在缓存起来？...
static.php 文件 $file = "static.html"; $ctime =filectime($file); $expr = 3600*24*10;//静态文件有效 ...
java 播放amr_amr格式转mp3和直接播放amr格式的文件-sunziren
原创文章,转载请注明出处! 前言: amr作为一种高压缩比的音频格式,受到很多客户的青睐.本文主要涉及两部分的内容,一是amr如何转为mp3格式,二是如何直接播放amr格式的文件. 1. 如何使用Ja ...
srs服务器播放文件,使用SRS+ffmpeg搭建流媒体服务器播放m3u8格式视频
1.简介 srs是一个简单的流媒体开源直播软件,ffmpeg是完整的跨平台解决方案,用于记录,转换和流传输音频和视频. 2.相关官网下载页面:点击我到达在线演示播放页面:点击我到达 Git页面:点 ...
video插件播放m3u8格式视频(存原生)
video插件播放m3u8格式视频(存原生) 这里使用原生的javascript实现m3u8格式视频播放. 使用了包括video.min.js库和HLS插件. 1-基础使用 <!DOCTYPE ...
uniapp H5 项目播放 m3u8格式视频
uniapp H5 项目播放 m3u8格式视频阐述在项目中,可能会获取一些直播流地址,比如最常见的就是.m3u8视频格式.在小程序可以直接使用video 标签就可以直接播放,因为小程序有自己的引 ...

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

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

最新文章

热门文章