1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

{{- $src := .Get "src" | default (.Get 0) -}}
<div id="dplayer"></div>

<link rel="preload" href="https://lib.baomitu.com/dplayer/1.25.0/DPlayer.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<script src="https://lib.baomitu.com/dplayer/1.25.0/DPlayer.min.js" defer></script>
<script defer>
document.addEventListener('DOMContentLoaded', function () {
    var dp = new DPlayer({
        container: document.getElementById('dplayer'),
        screenshot: false,
        video: {
            url: '{{- $src -}}',
            type: 'auto'
        },
        preload: 'none',
        lang: 'zh-cn'
    });

    dp.on('fullscreen', function () {
        dp.fullScreen.request('web');
    });

    dp.on('timeupdate', function () {
        if (dp.video.currentTime === 0) {
            dp.seek(1);
        }
    });

    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            dp.pause();
        }
    });

    var dplayerContainer = document.getElementById('dplayer');
    var timer;

    dplayerContainer.addEventListener('mouseleave', function() {
      timer = setTimeout(function() {
        dplayerContainer.style.border = 'none';
      }, 1000);
    });

    dplayerContainer.addEventListener('mouseenter', function() {
      clearTimeout(timer);
      dplayerContainer.style.border = '';
    });
});
</script>