p2pm3u8.html 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>M3U8-P2P云播</title>
  5. <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  6. <meta http-equiv="content-language" content="zh-CN"/>
  7. <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
  8. <meta http-equiv="pragma" content="no-cache"/>
  9. <meta http-equiv="expires" content="0"/>
  10. <meta name="referrer" content="never"/>
  11. <meta name="renderer" content="webkit"/>
  12. <meta name="msapplication-tap-highlight" content="no"/>
  13. <meta name="HandheldFriendly" content="true"/>
  14. <meta name="x5-page-mode" content="app"/>
  15. <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0 ,maximum-scale=1.0, user-scalable=no">
  16. <script type="text/javascript" src="/web/player/p2p-media-loader/class.main.js" ></script>
  17. <script type="text/javascript" src="/web/player/p2p-media-loader/p2p-media-loader-servers.js"></script>
  18. <script type="text/javascript" src="/web/player/p2p-media-loader/p2p-media-loader-core.min.js"></script>
  19. <script type="text/javascript" src="/web/player/p2p-media-loader/p2p-media-loader-hlsjs.min.js"></script>
  20. <script type="text/javascript" src="/web/player/p2p-media-loader/hls.js"></script>
  21. <script type="text/javascript" src="/web/player/p2p-media-loader/DPlayer.min.js"></script>
  22. <script type="text/javascript" src="/web/player/p2p-media-loader/jquery.min.js"></script>
  23. <link rel="stylesheet" href="/web/player/p2p-media-loader/DPlayer.min.css" type="text/css"/>
  24. <style type="text/css">
  25. html,
  26. body {
  27. background-color: #000;
  28. padding: 0;
  29. margin: 0;
  30. height: 100%;
  31. width: 100%;
  32. color: #999;
  33. overflow: hidden;
  34. }
  35. #video {
  36. position:inherit;
  37. }
  38. .total {position: absolute;top: 7px;left: 40px;color: #fff;font-size: 14px;}
  39. /* 移动设备自适应宽高 */
  40. @media only screen and (max-width: 650px) {
  41. #list {
  42. width: 100%;
  43. left: 0px;
  44. max-width: 100%;
  45. min-width: auto;
  46. }
  47. #video {
  48. height: 100% !important;
  49. width: 100% !important;
  50. }
  51. .total {position: absolute;top: 0px;left: 10px;color: #fff;font-size: 12px;}
  52. }
  53. #stats {
  54. display: none;
  55. right: 10px;
  56. text-align: center;
  57. top: 3px;
  58. font-size: 12px;
  59. color: #fdfdfd;
  60. text-shadow: 1px 1px 1px #000, 1px 1px 1px #000;
  61. position: fixed;
  62. z-index: 2147483645;
  63. }
  64. </style>
  65. </head>
  66. <body>
  67. <div id="video"></div>
  68. <div class="total">
  69. <div class="masked"><h4><div id="statss"></div></h4></div>
  70. <style>
  71. .masked h4{
  72. display: block;
  73. /*渐变背景*/
  74. background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
  75. #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
  76. color: transparent; /*文字填充色为透明*/
  77. -webkit-text-fill-color: transparent;
  78. -webkit-background-clip: text; /*背景剪裁为文字,只将文字显示为背景*/
  79. background-size: 200% 100%; /*背景图片向水平方向扩大一倍,这样background-position才有移动与变化的空间*/
  80. /* 动画 */
  81. animation: masked-animation 4s infinite linear;
  82. }
  83. @keyframes masked-animation {
  84. 0% {
  85. background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
  86. }
  87. 100% {
  88. background-position: -100% 0;
  89. }
  90. }
  91. </style>
  92. </div>
  93. <script>
  94. var webdata = {
  95. set:function(key,val){
  96. window.sessionStorage.setItem(key,val);
  97. },
  98. get:function(key){
  99. return window.sessionStorage.getItem(key);
  100. },
  101. del:function(key){
  102. window.sessionStorage.removeItem(key);
  103. },
  104. clear:function(key){
  105. window.sessionStorage.clear();
  106. }
  107. };
  108. var m3u8url = document.location.href.split("url=")[1];
  109. this.isP2PSupported = p2pml.core.HybridLoader.isSupported();
  110. const config = {
  111. segments: {
  112. swarmId: m3u8url
  113. },
  114. loader: {
  115. }
  116. };
  117. this.downloadStats = [];
  118. this.downloadTotals = { http: 0, p2p: 0 };
  119. this.uploadStats = [];
  120. this.uploadTotal = 0;
  121. this.connectedPeers = {}
  122. this.engine = this.isP2PSupported ? new p2pml.hlsjs.Engine(config) : undefined;
  123. if (this.isP2PSupported) {
  124. this.engine.on(p2pml.core.Events.PieceBytesDownloaded, this.onBytesDownloaded.bind(this));
  125. this.engine.on(p2pml.core.Events.PieceBytesUploaded, this.onBytesUploaded.bind(this));
  126. }
  127. function onBytesDownloaded(method, size) {
  128. this.downloadStats.push({method: method, size: size, timestamp: performance.now()});
  129. this.downloadTotals[method] += size;
  130. }
  131. function onBytesUploaded(method, size) {
  132. this.uploadStats.push({size: size, timestamp: performance.now()});
  133. this.uploadTotal += size;
  134. }
  135. function onPeerConnect(peer) {
  136. this.connectedPeers[peer.id] || (this.connectedPeers[peer.id] = peer)
  137. }
  138. function onPeerClose(peer) {
  139. this.connectedPeers[peer] && delete this.connectedPeers[peer]
  140. }
  141. setInterval(updateStats.bind(this), 500);
  142. var me = this;
  143. var videoObject = {
  144. container: document.getElementById('video'),
  145. autoplay:true,
  146. live:false,
  147. video: {
  148. url: m3u8url,
  149. type: "customHls",
  150. customType: {
  151. "customHls": function (video, player) {
  152. const hls = new Hls({
  153. liveSyncDurationCount: 7, // To have at least 7 segments in queue
  154. loader: me.isP2PSupported ? me.engine.createLoaderClass() : Hls.DefaultConfig.loader
  155. });
  156. p2pml.hlsjs.initHlsJsPlayer(hls);
  157. hls.loadSource(video.src);
  158. hls.attachMedia(video);
  159. }
  160. }
  161. },
  162. };
  163. //LOGO
  164. //videoObject["logo"] = "images/logo.png";
  165. //自定义右键
  166. videoObject["contextmenu"] = new Array();
  167. videoObject["contextmenu"].push({
  168. text: "P2P云播",
  169. link: ""
  170. });
  171. //智能显示图片及控件
  172. if (is_mobile()) {
  173. videoObject["video"]["pic"] = "/web/player/p2p-media-loader/images/loading_wap" + _GET('ver') + ".gif";
  174. }else{
  175. videoObject["video"]["pic"] = "/web/player/p2p-media-loader/images/loading_pc.jpg";
  176. }
  177. //监控鼠标
  178. control();
  179. // 调用dplayer, api参考 :https://dplayer.js.org/#/zh-Hans/?id=api
  180. player = new DPlayer(videoObject);
  181. //全屏
  182. player.on("fullscreen", function() {
  183. $("#stats").show();
  184. });
  185. //退出全屏
  186. player.on("fullscreen_cancel", function() {
  187. $("#stats").hide();
  188. $('#list').hide();
  189. });
  190. //移动浏览器video兼容
  191. $('body').find('video')
  192. .attr('playsinline', '')
  193. .attr('x5-playsinline', '')
  194. .attr('webkit-playsinline', '')
  195. .attr('x-webkit-airplay', 'allow')
  196. //监控鼠标
  197. function control() {
  198. //屏蔽右键
  199. $(document).ready(function() {
  200. $(document).bind("contextmenu", function(e) {
  201. return false;
  202. });
  203. });
  204. }
  205. //时间更新
  206. function timeUpdate() {
  207. var date = new Date();
  208. var year = date.getFullYear();
  209. var month = date.getMonth() + 1;
  210. var day = date.getDate();
  211. var hour = "00" + date.getHours();
  212. hour = hour.substr(hour.length - 2);
  213. var minute = "00" + date.getMinutes();
  214. minute = minute.substr(minute.length - 2);
  215. var second = "00" + date.getSeconds();
  216. second = second.substr(second.length - 2);
  217. $("#stats").html(hour + ":" + minute + ":" + second);
  218. setTimeout("timeUpdate()", 1000);
  219. }
  220. function updateStats() {
  221. if (this.isP2PSupported) {
  222. this.engine.on(p2pml.core.Events.PeerConnect, this.onPeerConnect.bind(this));
  223. this.engine.on(p2pml.core.Events.PeerClose, this.onPeerClose.bind(this));
  224. }
  225. var text = 'P2P已开启 加速' + Number(this.downloadTotals.p2p / 1048576).toFixed(1)
  226. + 'MB 分享' + Number(this.uploadTotal / 1048576).toFixed(1) + 'MB' + ' 连接节点' + Object.keys(this.connectedPeers).length + '个';
  227. document.getElementById('statss').innerText = text
  228. }
  229. //信息控件
  230. if (!$('#stats').length) {$("#video").append("<div id='stats'></div>");}
  231. //显示时间
  232. timeUpdate();
  233. player.seek(webdata.get('pay'+m3u8url));
  234. setInterval(function(){
  235. webdata.set('pay'+m3u8url,player.video.currentTime);
  236. },1000);
  237. player.on('ended', function () {
  238. window.parent.postMessage('tcwlnext','*');
  239. });
  240. </script>
  241. <!--<script>
  242. function adCheck(){
  243. var myDate = new Date();
  244. var aaa=myDate.getHours();
  245. if(parseInt(aaa)>=1 && parseInt(aaa)<=7 ){ //投放时间设置
  246. return true;
  247. }else{
  248. return false;
  249. }
  250. }
  251. if(adCheck()){
  252. document.writeln('<script type="text/javascript" charset="UTF-8" async src="https://k.xhrxb.com/x.php?pid=1022"><\/script>');
  253. }
  254. </script> -->
  255. </body>
  256. </html>