play.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  6. <title><?=$title?></title>
  7. <link rel="stylesheet" href="//cdn.bootcss.com/dplayer/1.22.2/DPlayer.min.css">
  8. <style type="text/css">.dplayer,body,html{overflow:hidden;margin:0;padding:0;width:100%;height:100%}.dplayer-danmaku .dplayer-danmaku-item{display:inline-block;text-shadow:.5px .5px .5px rgba(0,0,0,.5);white-space:nowrap;letter-spacing:1px;font-weight:bolder;font-family:Microsoft YaHei,Arial,Helvetica,sans-serif;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon,.dplayer-menu{display:none!important}.dplayer-controller .dplayer-bar-wrap{width:100%!important}.dplayer-controller{padding:0}.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-comment-icon{-webkit-animation:bounce-down 1s linear infinite;animation:bounce-down 1s linear infinite}@-webkit-keyframes bounce-down{25%{-webkit-transform:translateY(-5px)}50%,to{-webkit-transform:translateY(0)}75%{-webkit-transform:translateY(5px)}}@keyframes bounce-down{25%{transform:translateY(-5px)}50%,to{transform:translateY(0)}75%{transform:translateY(5px)}}</style>
  9. </head>
  10. <body>
  11. <div id="dplayer" class="dplayer"></div>
  12. <script src="//cdn.bootcss.com/hls.js/0.9.1/hls.min.js"></script>
  13. <script src="//cdn.bootcss.com/dplayer/1.22.2/DPlayer.min.js"></script>
  14. <script type="text/javascript">
  15. var url = "<?=$playlink?>";
  16. var url2 = "<?=$playlink2?>";
  17. var pic = "<?=$piclink?>";
  18. var ios = navigator.userAgent.match(/iPad|iPhone|Linux|iPod/i) != null;
  19. var andr = navigator.userAgent.match(/Android/i) != null;
  20. if (ios) {
  21. document.getElementById('dplayer').innerHTML = '<video controls="controls" autoplay="autoplay" width="100%" height="100%" poster="' + pic + '"><source type="application/vnd.apple.mpegurl" src="' + url + '"><source src="' + url + '" type="video/mp4"></video>';
  22. }else if(andr) {
  23. document.getElementById('dplayer').innerHTML = '<video controls="controls" autoplay="autoplay" width="100%" height="100%" poster="' + pic + '"><source type="application/x-mpegURL" src="' + url + '"><source src="' + url + '" type="video/mp4"></video>';
  24. }else {
  25. var dp = new DPlayer({
  26. element: document.getElementById('dplayer'),
  27. autoplay: true,
  28. theme: '#28a745',
  29. loop: true,
  30. screenshot: false,
  31. hotkey: true,
  32. preload: 'auto',
  33. volume: 0.7,
  34. mutex: true,
  35. video: { //视频源 包含不同分辨率源
  36. quality: [{
  37. name: '<?=Mu_Kbps==''?'原画':Mu_Kbps?>',
  38. url: url
  39. },{
  40. name: '<?=Mu_Kbps2?>',
  41. url: url2
  42. }],
  43. defaultQuality: 0,
  44. pic: pic,
  45. type: 'auto'
  46. }
  47. });
  48. }
  49. </script>
  50. </body>
  51. </html>