zhaobao
/
layui_back


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>EZOPEN播放协议</title>
    <style>
        body {
            margin: 0;
        }

        .hint {
            font-size: 14px;
            line-height: 3em;
            color: gray;
        }

        #url,
        #url2,
        #accessToken {
            width: 100%;
        }

        .btn-container {
            margin: 10px;
        }

        .normal {
            color: green;
            margin: 5px;
        }

        .error {
            color: red;
            margin: 5px;
        }
    </style>
</head>
<script>
</script>

<body>
<script src="../ezuikit.js"></script>
<!-- <script src="../js/jsPlugin-1.2.0.js"></script> -->
<script src="../js/jquery.min.js"></script>
<div class="hint">demo页面仅为代码示例无法直接运行，需要部署到服务器上才可以播放。另外监控模式与多窗口模式对浏览器版本有要求：Chrome: 55+ Firefox: V55+。</div>
<h2>预览，回放功能示例：</h2>
<textarea id="url" placeholder="这里输入ezopen地址"></textarea>
<textarea id="accessToken" placeholder="这里输入accessToken"></textarea>
<div class="btn-container">
    <button id="init">初始化播放</button>
    <button id="play">播放</button>
    <button id="stop">结束</button>
    <button id="getOSDTime">获取OSD时间</button>
    <button id="openSound">打开声音（默认已经开启）</button>
    <button id="closeSound">关闭声音</button>
    <button id="capturePicture">视频截图</button>
    <button id="startSave">开始录像</button>
    <button id="stopSave">停止录像</button>
    <button id="enableZoom">开启电子放大</button>
    <button id="closeZoom">关闭电子放大</button>
    <span>录制功能不支持加密视频，且录制的文件需要<a href="https://service.ys7.com/downloadInfoSite/admin"
                                 target="_blank">下载海康播放器播放</a></span>

</div>
<div id="playWind" style="width: 600px; height: 400px;">
</div>
<script>
    $("#init").click(function () {
        function handleError(e) {
            console.log('捕获到错误', e)
            // log(JSON.stringify(e),'error');
            //alert(e)
        }

        function handleSuccess() {
            console.log("播放成功回调函数，此处可执行播放成功后续动作");
        }

        var url = $('#url').val().trim();
        var accessToken = $('#accessToken').val().trim();
        var decoder = new EZUIKit.EZUIPlayer({
            id: 'playWind',
            autoplay: true,
            url: url,
            accessToken: accessToken,
            decoderPath: '',
            width: 600,
            height: 400,
            handleError: handleError,
            handleSuccess: handleSuccess,
        });
        // 这里是打印日志，本例抛出到播放页面
        decoder.on('log', log);

        function log(str, className) {
            var div = document.createElement('DIV');
            div.className = className || 'normal';
            div.innerHTML = (new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str);
            document.body.appendChild(div);
        }

        $("#start").click(function () {
            function handleError(e) {
                console.log('handleError', e)
            }

            function handleSuccess() {
                console.log('handleSuccess')
            }

            decoder.play({
                handleError: handleError,
            });
        })
        $("#stop").click(function () {
            /*停止播放方法1*/
            // decoder.stop();
            /*停止播放方法2 - promise模式*/
            var stopPromise = decoder.stop();
            stopPromise.then(function () {
                console.log("关闭成功，用户执行关闭成功后的操作");
            })
        })
        $("#getOSDTime").click(function () {
            var getOSDTimePromise = decoder.getOSDTime();
            getOSDTimePromise.then(function (data) {
                console.log("getOSDTime success", data)
            })
        })
        $("#openSound").click(function () {
            decoder.openSound();
        })
        $("#closeSound").click(function () {
            decoder.closeSound();
        })
        $("#capturePicture").click(function () {
            /*截图方法1*/
            // decoder.capturePicture(0,'default');
            /*截图方法2*/
            var capturePicturePromise = decoder.capturePicture(0, 'default');
            capturePicturePromise.then(function (data) {
                console.log("截图成功，用户执行关闭成功后的操作", data);
            })
        })
        $("#startSave").click(function () {
            // decoder.startSave(0, (new Date().getTime() + 'video'));
            /*开始录制方法2*/
            var startSavePromise = decoder.startSave(0, (new Date().getTime() + 'video'));
            startSavePromise.then(function (data) {
                console.log("start save success", startSavePromise)
            })
                .catch(function (error) {
                    console.log("start Save error", error)
                })
        })
        $("#stopSave").click(function () {
            /*结束录制方法1*/
            // decoder.stopSave(0);
            /*结束录制方法2*/
            var stopSavePromise = decoder.stopSave(0);
            stopSavePromise.then(function (data) {
                console.log("stop save success", stopSavePromise)
            })
                .catch(function (error) {
                    console.log("stop Save error", error)
                })
        })
        $("#play").click(function () {
            decoder.play();
        })
        $("#enableZoom").click(function () {
            decoder.enableZoom();
        })
        $("#closeZoom").click(function () {
            decoder.closeZoom();
        })
    })
</script>
</body>

</html>