<%@ page language="C#" autoeventwireup="true" inherits="ims.preview, ims.web" enableviewstatemac="false" enableEventValidation="false" %>
<!DOCTYPE html>
<html id="preview">
<head runat="server">
    <title></title><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        body{margin:0;text-align:center}
        #form1{display:block;text-align:left}
        #msg{display:none;font-size:14px;margin:24px 0 9px;text-align:center}
        #jp1,#jp2,.hide{display:none}
    </style>
    <link href="js/jplayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="jp1">
            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
            <div id="jp_container_1" class="jp-audio">
            <div class="jp-type-single">
                <div class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-play" tabindex="1">播放</a></li>
                    <li><a href="javascript:;" class="jp-pause" tabindex="1">暂停</a></li>
                    <li><a href="javascript:;" class="jp-stop" tabindex="1">停止</a></li>
                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="静音">静音</a></li>
                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="取消静音">取消静音</a></li>
                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="最大音量">最大音量</a></li>
                </ul>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                    </div>
                </div>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
                <div class="jp-time-holder">
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                    <ul class="jp-toggles">
                    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="重复">重复</a></li>
                    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="取消重复">取消重复</a></li>
                    </ul>
                </div>
                </div>
                <div class="jp-details">
                <ul>
                    <li><span class="jp-title"></span></li>
                </ul>
                </div>
                <!--<div class="jp-no-solution">
                无法播放该文件。可尝试升级浏览器或浏览器的<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash 插件</a>。
                </div>-->
            </div>
            </div>
        </div>

        <div id="jp2" class="jp-video">
        <div class="jp-type-single">
            <div id="jquery_jplayer_2" class="jp-jplayer"></div>
            <div class="jp-gui">
            <div class="jp-video-play">
                <a href="javascript:;" class="jp-video-play-icon" tabindex="1">播放</a>
            </div>
            <div class="jp-interface">
                <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                </div>
                </div>
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>
                <div class="jp-controls-holder">
                <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-play" tabindex="1">播放</a></li>
                    <li><a href="javascript:;" class="jp-pause" tabindex="1">暂停</a></li>
                    <li><a href="javascript:;" class="jp-stop" tabindex="1">停止</a></li>
                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="静音">静音</a></li>
                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="取消静音">取消静音</a></li>
                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="最大音量">最大音量</a></li>
                </ul>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
                <ul class="jp-toggles">
                    <li><a href="javascript:;" onmousedown="return fullScreen(true);" class="jp-full-screen" tabindex="1" title="全屏">全屏</a></li>
                    <li><a href="javascript:;" class="jp-restore-screen" onmousedown="return fullScreen(false);" tabindex="1" title="取消全屏">取消全屏</a></li>
                    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="重复">重复</a></li>
                    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="取消重复">取消重复</a></li>
                </ul>
                </div>
                <div class="jp-details">
                <ul>
                    <li><span class="jp-title"></span></li>
                </ul>
                </div>
            </div>
            </div>
            <!--<div class="jp-no-solution">
            无法播放该文件。可尝试升级浏览器或浏览器的<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash 插件</a>。
            </div>-->
        </div>
        </div>

        <div id="msg"></div>
        <script src="js/comm.js"></script>
        <script src="js/jPlayer/jplayer.js"></script>
        <script>
            var dbType = "Access";
            $(function () {
                var href = location.href;
                var fileName = getUrlParam("file", href);
                if (IsVoid(fileName)) {
                    showMsg("参数错误！");
                } else {
                    var dir = getUrlParam("dir") || "files";
                    var url = dir + "/" + dbType + "/" + fileName;
                    if (($.browser.msie || $.browser.ie11) && /\.(wav)$/i.test(fileName)) { //wav格式，jplayer无法播放，尝试使用IE的bgsound进行播放
                        $("#jp1,#jp2").hide();
                        $("<div style='text-align:center;margin:3em 1em 3px;font-family:微软雅黑;font-size:14px;color:#080'>正在循环播放 " + getUrlParam("title", href) + fileName.substr(fileName.lastIndexOf(".")) + " …</div><bgsound loop='-1' class='hide' src='" + url + "' />").appendTo("body");
                    } else {
                        var title = getUrlParam("title", href);
                        var extName = fileName.substr(fileName.lastIndexOf(".") + 1);
                        var i = document.createElement('input');
                        var html5 = 'placeholder' in i;
                        var usejplayer = (html5 && /\.(mp3|mp4|m4a|m4v|oga|ogv|ogg|webm|wav)$/i.test(fileName)) || (!html5 && /\.(mp3|mp4|m4a|m4v|rtmp|flv)$/i.test(fileName));
                        if (usejplayer) jplayer(url, title);
                    }
                }
            });
            function jplayer(url, title) {
                var ext = url.substr(url.lastIndexOf(".") + 1);
                if (ext == "webm") ext = "webmv";
                var media = { "title": title };
                media[ext] = url;
                if (/\.(mp3|ogg|wav|m4a|oga)$/i.test(url)) { //音频
                    $("#jp1").show();
                    $("#jquery_jplayer_1").jPlayer({
                        ready: function () {
                            $(this).jPlayer("setMedia", media).jPlayer("play");
                        },
                        swfPath: "js/jPlayer",
                        supplied: ext
                    });
                } else {
                    $("#jp2").show();
                    $("#jquery_jplayer_2").jPlayer({
                        ready: function () {
                            $(this).jPlayer("setMedia", media).jPlayer("play");
                        },
                        swfPath: "js/jPlayer",
                        supplied: ext,
                        size: {
                            width: "640px", height: "360px", cssClass: "jp-video-360p"
                        },
                        cssSelectorAncestor: "#jp2"
                    });
                }
            }
            function showMsg(content) {
                $("#msg").text(content).show();
            }
            function fullScreen(full) {
                if (inPopup()) parent.$.colorbox.resize(full ? { width: "92%", height: "100%" } : { width: 692, height: 530 });
                $(getEventSrc())[0].click();
                return false;
            }
        </script>
    </form>
</body>
</html>
