.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)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码...

asp.net 网页中播放mp4文件,IIS中设置MIME类型

上传了flv或MP4文件到服务器,可输入正确地址通过http协议来访问总是出现“无法找到该页”的404错误呢?这就表明mp4格式文件是服务器无法识别的,其实,这是没有在IIS中将相应的MIME类型进行...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

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

现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) 原因:IIS的MIME中...

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

公司做监控的,用海康威视,视频保存后切割成 .264格式文件,将地址保存入数据库,我的任务是将它分类读取出来。 首先前去下载 VLC播放器:http://www.videolan.org/vlc/...

页面视频播放器

前段时间做了一个视频培训系统,用到了页面播放器,在网上找到了一款不错的页面视频播放器,在这里和大家分享一下。       ckplayer就是这款播放器的名字,到官网去下载源码,然后将解压的文件放到...

全屏视频播放页的简单处理

视频播放页面

HTML5_1 页面视频、音频播放

一般网页上的视频都是用Filsh实现的 Flash的使用还是比较有局限性的 如果作者不具备Flash知识 就不容易把视频放在网页中 HTML5中规定了视频标签“Video” Video标签是HTML5...

网页中播放视频文件

紫色部分是本地Flvplayer.swf文件的路径,红色部分是需要播放的FLV文件URL obejct标签里是IE浏览器用 内嵌embed是非IE浏览器用     http://192.168.1....

动态页面,静态页面,伪静态页面的区别

我们经常会看到,在地址栏里有一些网址特别长,而且还带有“?”,这样的链接一般是动态链接,其所对应的页面就是动态页面。 在技术上,动态页面具有这些特征: 1,动态页面是以ASP、PHP、JSP、AS...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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