index.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. html,body {
  7. background-color: #191919;
  8. height: 100%;
  9. width: 100%;
  10. margin: 0;
  11. padding: 0;
  12. }
  13. .m {
  14. width: 100%;
  15. height: 100%;
  16. margin-left: auto;
  17. margin-right: auto;
  18. margin-top: 0px;
  19. }
  20. #video_box {
  21. width: 100%;
  22. height: 100%;
  23. }
  24. .video-js,
  25. video {
  26. width: 100% !important;
  27. height: 100% !important;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. {if condition="$ext_info == 'mp4'"}
  33. <link rel="stylesheet" href="__ADDON__/css/video.css">
  34. <div class="m">
  35. <div id="video_box">
  36. <video id='example-video' class="video-js vjs-default-skin Fn vjs-big-play-centered" controls>
  37. <source src="{:cdnurl($url,true)}" >
  38. </video>
  39. </div>
  40. <script type="text/javascript" src="__ADDON__/js/video.js"> </script>
  41. <script>
  42. var videojs = videojs('example-video', {
  43. controls: true, //是否控制条
  44. autoplay: false, //自动播放
  45. preload: 'auto', //预加载
  46. });
  47. </script>
  48. </div>
  49. {elseif condition="$ext_info == 'pdf'" /}
  50. <iframe src='{:cdnurl($url,true)}' style="position: absolute;width: 100%;height: 100%" frameborder='0'>
  51. </iframe>
  52. {else /}
  53. <iframe src='https://view.officeapps.live.com/op/view.aspx?src={:cdnurl($url,true)}' style="position: absolute;width: 100%;height: 100%" frameborder='0'>
  54. </iframe>
  55. {/if}
  56. </body>
  57. </html>