{{template "header" .}}
<div class="container-fluid flex justify-content">
    <div class="main">
        <h6 style="margin-top: 20px;margin-bottom: 10px;">正在播放 &lt;&lt;Git - Div Rhino&gt;&gt;</h6>
        <video id="video" controls width="100%"></video>
        <div class="tip-box">
            <div class="tip-icon">
                <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="InfoOutlinedIcon">
                    <path
                        d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z">
                    </path>
                </svg>
            </div>
            <div class="tip-info">
                <p>空格键播放/暂停，上下箭头调整音量，左右箭头调整播放进度。播放器顶部停止按钮可以关闭播放器，回到详情页面。</p>
                <p>如果播放遇到问题，请尝试切换播放源。</p>
            </div>
        </div>
    </div>
</div>
<script src="/statics/js/hls.min.js"></script>
<script>
    var video = document.getElementById('video');
    if (Hls.isSupported()) {
        console.log("supported");
        var hls = new Hls();
        hls.loadSource('{{.Url}}');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            //video.play();
        });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        console.log("no supported");
        video.src = '{{.Url}}';
        video.addEventListener('loadedmetadata', function () {
            //video.play();
        });
    }
    // reurn false 禁止函数内部执行其他的事件或者方法
    var vol = 0.1;  // 1代表100%音量，每次增减0.1
    var time = 10; // 单位秒，每次增减10秒
    document.onkeyup = function (event) {//键盘事件
        // console.log("keyCode:" + event.keyCode);
        var e = event || window.event || arguments.callee.caller.arguments[0];
        // 鼠标上下键控制视频音量
        if (e && e.keyCode === 38) {
            // 按 向上键
            video.volume !== 1 ? video.volume += vol : 1;
            return false;
        } else if (e && e.keyCode === 40) {
            // 按 向下键
            video.volume !== 0 ? video.volume -= vol : 1;
            return false;
        } else if (e && e.keyCode === 37) {
            // 按 向左键
            video.currentTime !== 0 ? video.currentTime -= time : 1;
            return false;
        } else if (e && e.keyCode === 39) {
            // 按 向右键
            video.volume !== video.duration ? video.currentTime += time : 1;
            return false;
        } else if (e && e.keyCode === 32) {
            // 按空格键 判断当前是否暂停
            video.paused === true ? video.play() : video.pause();
            return false;
        }
    }
</script>
{{template "footer" .}}