☰

HTML5 on CCTV

Replace Flash Player with HTML5 Player on tv.cctv.com

目前为 2020-07-11 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         HTML5 on CCTV
  3. // @namespace    https://github.com/sffxzzp
  4. // @version      0.17
  5. // @description  Replace Flash Player with HTML5 Player on tv.cctv.com
  6. // @author       sffxzzp
  7. // @include      /^https?://tv.cctv.com/\d*/\d*/\d*/VIDE.*.shtml*/
  8. // @require      https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
  9. // @require      https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js
  10. // @icon         https://tv.cctv.com/favicon.ico
  11. // @connect      vdn.apps.cntv.cn
  12. // @connect      hls.cntv.myalicdn.com
  13. // @grant        GM_xmlhttpRequest
  14. // @grant        GM_addStyle
  15. // @grant        unsafeWindow
  16. // ==/UserScript==
  17.  
  18. (function() {
  19.     var util = (function () {
  20.         function util() {}
  21.         util.xhr = function (xhrData) {
  22.             return new Promise(function(resolve, reject) {
  23.                 if (!xhrData.xhr) {
  24.                     GM_xmlhttpRequest({
  25.                         method: xhrData.method || "get",
  26.                         url: xhrData.url,
  27.                         data: xhrData.data,
  28.                         headers: xhrData.headers || {},
  29.                         responseType: xhrData.type || "",
  30.                         timeout: 3e4,
  31.                         onload: function onload(res) {
  32.                             return resolve({ response: res, body: res.response });
  33.                         },
  34.                         onerror: reject,
  35.                         ontimeout: reject
  36.                     });
  37.                 } else {
  38.                     var xhr = new XMLHttpRequest();
  39.                     xhr.open(xhrData.method || "get", xhrData.url, true);
  40.                     if (xhrData.method === "post") {xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded; charset=utf-8");}
  41.                     if (xhrData.cookie) {xhr.withCredentials = true;}
  42.                     xhr.responseType = xhrData.responseType || "";
  43.                     xhr.timeout = 3e4;
  44.                     if (xhrData.headers) {for (var k in xhrData.headers) {xhr.setRequestHeader(k, xhrData.headers[k]);}}
  45.                     xhr.onload = function(ev) {
  46.                         var evt = ev.target;
  47.                         resolve({ response: evt, body: evt.response });
  48.                     };
  49.                     xhr.onerror = reject;
  50.                     xhr.ontimeout = reject;
  51.                     xhr.send(xhrData.data);
  52.                 }
  53.             });
  54.         };
  55.         util.createElement = function (data) {
  56.             var node;
  57.             if (data.node) {
  58.                 node = document.createElement(data.node);
  59.                 if (data.content) {this.setElement({node: node, content: data.content});}
  60.                 if (data.html) {node.innerHTML = data.html;}
  61.             }
  62.             return node;
  63.         };
  64.         util.setElement = function (data) {
  65.             if (data.node) {
  66.                 for (let name in data.content) {data.node.setAttribute(name, data.content[name]);}
  67.                 if (data.html!=undefined) {data.node.innerHTML = data.html;}
  68.             }
  69.         };
  70.         return util;
  71.     })();
  72.     var h5onCCTV = (function () {
  73.         function h5onCCTV() {};
  74.         h5onCCTV.prototype.addPlayer = function (m3u8) {
  75.             var h5css = util.createElement({node: 'link', content: {rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css'}});
  76.             document.head.appendChild(h5css);
  77.             var container = document.querySelector('.video_left');
  78.             GM_addStyle('.gwA151201_ind01, .retrieve, .buttonVal, #page_body > .column_wrapper, .video, .video .right_but, .cnt_share, [class^=jscroll] {z-index: auto !important;} .nav2 > div > div {z-index: 1 !important;}');
  79.             util.setElement({node: container, content: {style: 'height: 100%'}, html: '<div id="dplayer" style="width: 100%; height: 100%;"></div>'});
  80.             var pip = document.pictureInPictureEnabled ? [{text: '画中画模式', click: function () {document.querySelector('.dplayer-video').requestPictureInPicture().catch(console.log);}}] : [];
  81.             var dp = new DPlayer({
  82.                 container: container.children[0],
  83.                 video: {
  84.                     quality: m3u8,
  85.                     defaultQuality: m3u8.length-1
  86.                 },
  87.                 preload: 'none',
  88.                 contextmenu: pip
  89.             });
  90.             unsafeWindow.dp = dp;
  91.             var curTime = localStorage.getItem(unsafeWindow.guid);
  92.             if (curTime) {
  93.                 dp.seek(curTime);
  94.                 var showTime = '';
  95.                 if (curTime > 3600) {showTime += ' '+parseInt(curTime/3600)+' 时'; curTime = curTime%3600;}
  96.                 if (curTime > 60) {showTime += ' '+parseInt(curTime/60)+' 分'; curTime = curTime%60;}
  97.                 showTime += ' '+parseInt(curTime)+' 秒';
  98.                 dp.notice('已跳转到上次观看进度'+showTime, 2000);
  99.             }
  100.             dp.on('timeupdate', function () {
  101.                 if ((dp.video.duration-dp.video.currentTime > 30) && dp.video.currentTime > 30) {
  102.                     localStorage.setItem(unsafeWindow.guid, dp.video.currentTime);
  103.                 }
  104.                 else {
  105.                     localStorage.removeItem(unsafeWindow.guid);
  106.                 }
  107.             });
  108.         }
  109.         h5onCCTV.prototype.run = function () {
  110.             var _this = this;
  111.             util.xhr({
  112.                 url: `https://vdn.apps.cntv.cn/api/getHttpVideoInfo.do?pid=${unsafeWindow.guid}`,
  113.                 type: 'json'
  114.             }).then(function (res) {
  115.                 var url = res.body.hls_url.replace('://', '/').split('/');
  116.                 url = `${url[0]}://hls.cntv.myalicdn.com/${url.slice(2).join('/')}`;
  117.                 util.xhr({
  118.                     url: url
  119.                 }).then(function (res) {
  120.                     var vlist = res.body.split('\n');
  121.                     var m3u8 = [];
  122.                     vlist.forEach(function (v) {
  123.                         if (v.indexOf('/200.m3u8')>-1) {m3u8.push({name: '流畅', url: 'https://hls.cntv.myalicdn.com'+v, type: 'hls'});}
  124.                         else if (v.indexOf('/450.m3u8')>-1) {m3u8.push({name: '低清', url: 'https://hls.cntv.myalicdn.com'+v, type: 'hls'});}
  125.                         else if (v.indexOf('/850.m3u8')>-1) {m3u8.push({name: '标清', url: 'https://hls.cntv.myalicdn.com'+v, type: 'hls'});}
  126.                         else if (v.indexOf('/1200.m3u8')>-1) {m3u8.push({name: '高清', url: 'https://hls.cntv.myalicdn.com'+v, type: 'hls'});}
  127.                         else if (v.indexOf('/2000.m3u8')>-1) {m3u8.push({name: '超清', url: 'https://hls.cntv.myalicdn.com'+v, type: 'hls'});}
  128.                     });
  129.                     _this.addPlayer(m3u8);
  130.                 });
  131.             });
  132.         };
  133.         return h5onCCTV;
  134.     })();
  135.     var program = new h5onCCTV();
  136.     program.run();
  137. })();