<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" th:href="@{/css/video-js.min.css}"/>
</head>

<body>
    <div class="timo-detail-page">
        <video id="video" class="video-js vjs-big-play-centered vjs-fluid">
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a
                web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">
                    supports HTML5 video
                </a>
            </p>
        </video>
    </div>
</body>

<script type="text/javascript" th:src="@{/js/video.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    window.addEventListener('DOMContentLoaded', function () {
        // var videoId = '${videoInfo.fileId}'
        // var src = '${videoInfo.url}'
        var src = ''
        initPlayer(videoId, src)
    })

    function initPlayer(videoId, src) {
        var player = videojs(document.getElementById('video'), {
            controls: true, // 是否显示控制条
            poster: '', // 视频封面图地址
            preload: 'auto',
            autoplay: false,
            fluid: true, // 自适应宽高
            language: 'zh-CN', // 设置语言
            muted: false, // 是否静音
            inactivityTimeout: false,
            controlBar: { // 设置控制条组件
                /* 设置控制条里面组件的相关属性及显示与否
                'currentTimeDisplay':true,
                'timeDivider':true,
                'durationDisplay':true,
                'remainingTimeDisplay':false,
                volumePanel: {
                    inline: false,
                }
                */
                /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
                children: [
                    {name: 'playToggle'}, // 播放按钮
                    {name: 'currentTimeDisplay'}, // 当前已播放时间
                    {name: 'progressControl'}, // 播放进度条
                    {name: 'durationDisplay'}, // 总时间
                    { // 倍数播放
                        name: 'playbackRateMenuButton',
                        'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                    },
                    {
                        name: 'volumePanel', // 音量控制
                        inline: false, // 不使用水平方式
                    },
                    {name: 'FullscreenToggle'} // 全屏
                ]
            },
            sources:[ // 视频源
                {
                    src: src,
                    type: 'video/mp4',
                    poster: ''
                }
            ]
        }, function (){
        });
    }
</script>
</html>