{%extends 'layout.html'%}

{%block content%}
<link class="dplayer-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/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" value="{{url}}"/>
  </div>
  <div class="mdui-textfield">
    <label class="mdui-textfield-label">引用地址</label>
    <textarea class="mdui-textfield-input"><video><source src="{{url}}" type="video/mp4"></video></textarea>
  </div>
</div>
<script>
const dp = new DPlayer({
  container: document.getElementById('dplayer'),
  lang:'zh-cn',
  video: {
      url: '{{url}}',
      type: 'dash'
  }
});
</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%}