PyOne/app/templates/theme/material/show/video.html

{%extends 'theme/'+GetConfig('theme')+'/layout.html'%}

{%block content%}
<link class="dplayer-css" rel="stylesheet" href="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.css">
<script src="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.js"></script>
<div class="mdui-container-fluid">
  <br>
  <div id="dplayer"></div>
  <br>
  <!-- 固定标签 -->
  <div class="mdui-textfield">
    <label class="mdui-textfield-label">分享地址</label>
    <input class="mdui-textfield-input" type="text" id="share" value="{{url.split('?')[0]}}?action=share" onclick="copyUrl('share')"/>
  </div>
  <div class="mdui-textfield">
    <label class="mdui-textfield-label">内嵌窗口</label>
    <input class="mdui-textfield-input" type="text" id="iframe" value="{{url.split('?')[0]}}?action=iframe" onclick="copyUrl('iframe')"/>
  </div>
  <div class="mdui-textfield">
    <label class="mdui-textfield-label">调用地址</label>
    <input class="mdui-textfield-input" type="text" id="out_use" value="{{url}}" onclick="copyUrl('out_use')"/>
  </div>
</div>
<script>
  $(function () {
      const dp = new DPlayer({
          container: document.getElementById('dplayer'),
          lang: 'zh-cn',
          video: {
              url: "{{url}}",
              type: 'auto'
          },
          autoplay: true
      });
      // 防止出现401 token过期
      var cnt=1;
      dp.on('error', function () {
          if(cnt<=3){
              console.log('获取资源错误，开始重新加载！');
              let last = dp.video.currentTime;
              dp.video.src = "{{url}}";
              dp.video.load();
              dp.video.currentTime = last;
              dp.play();
              cnt=cnt+1;
          }

      });
      // 如果是播放状态 & 没有播放完 每25分钟重载视频防止卡死
      setInterval(function () {
          if (!dp.video.paused && !dp.video.ended) {
              console.log('开始重新加载！');
              let last = dp.video.currentTime;
              dp.video.src = "{{url}}";
              dp.video.load();
              dp.video.currentTime = last;
              dp.play();
          }
      }, 1000 * 60 * 25)
  });
</script>
<a href="{{url}}" class="mdui-fab mdui-fab-fixed mdui-ripple mdui-color-theme-accent"><i class="mdui-icon material-icons">file_download</i></a>
{%endblock content%}