☰

HTML5 player for BBC News

Use a natively uncluttered hardware-accelerated player, no ads or annoyances. Also, easily downloadable videos.

目前為 2016-04-14 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        HTML5 player for BBC News
  3. // @match       http://www.bbc.com/*
  4. // @version     2016.04.14
  5. // @description Use a natively uncluttered hardware-accelerated player, no ads or annoyances. Also, easily downloadable videos.
  6. // @grant       GM_xmlhttpRequest
  7. // @namespace   https://greasyfork.org/users/4813
  8. // @icon        https://i.imgur.com/hygPGJg.png
  9. // ==/UserScript==
  10.  
  11. for (var i in (src = document.querySelectorAll('script:not([src])')))
  12. {
  13.     if (typeof src[i] !== 'object' || src[i].textContent.indexOf('externalId') === -1)
  14.         continue;
  15.  
  16.     var vpid = src[i].textContent.match(/externalId":"([^"]+)"/)[1];
  17.  
  18.     console.log(i, vpid);
  19. }
  20.  
  21. var vpid = document.documentElement.innerHTML.match(/p0\w+/)[0];
  22.  
  23. if (!vpid)
  24.   throw 'BBC HTML5: nothing to do :)';
  25.  
  26. GM_xmlhttpRequest(
  27. {
  28.   method: 'GET',
  29.   url: 'https://open.live.bbc.co.uk/mediaselector/5/select/version/2.0/format/json/mediaset/journalism-http-tablet/transferformat/plain/vpid/' + vpid,
  30.  
  31.   onreadystatechange: function(e)
  32.   {
  33.     if (e.readyState !== XMLHttpRequest.DONE)
  34.       return;
  35.  
  36.     this.responseJSON = JSON.parse(e.responseText);
  37.  
  38.     /* just for taking a look, please don't mind me! :-) */
  39.     console.log(e, this.responseJSON);
  40.  
  41.     if (!this.responseJSON.media)
  42.     {
  43.       console.warn('BBC HTML5: the listing did not come with any video at all!', this.responseJSON);
  44.       return;
  45.     }
  46.  
  47.     /* initial setup for finding the video we're ending up playing */
  48.     var hq = 2, hq_bitrate = 0;
  49.  
  50.     /* add a download button per result video */
  51.     for(var vid in this.responseJSON.media)
  52.     {
  53.       console.log("=>", vid, this.responseJSON.media[vid].width,
  54.                              this.responseJSON.media[vid].height,
  55.                              this.responseJSON.media[vid],
  56.                              this.responseJSON.media[vid].connection[0].href);
  57.  
  58.       dwnbutton = document.createElement("a");
  59.       dwnbutton.setAttribute('style', 'padding-right: 10px;');
  60.  
  61.       dwnbutton.textContent = this.responseJSON.media[vid].width + 'p';
  62.       dwnbutton.href        = this.responseJSON.media[vid].connection[0].href;
  63.       dwnbutton.className   = 'icon';
  64.       dwnbutton.title       = 'Download the ' + this.responseJSON.media[vid].width  + 'x'
  65.                                               + this.responseJSON.media[vid].height + ' px version of this video.';
  66.       dwnbutton.download    = document.querySelector('#media-asset-page-text > h1').textContent + '.' + dwnbutton.textContent + '.mp4';
  67.  
  68.       /* replace it on the page */
  69.       dwnbuttonHolderElement = document.querySelector('.player-wrapper');
  70.       dwnbuttonHolderElement.appendChild(dwnbutton);
  71.  
  72.       /* reuse the loop to find the version w/ the best quality */
  73.       if (+(this.responseJSON.media[vid].bitrate) > hq_bitrate)
  74.       {
  75.         console.log(this.responseJSON.media[vid].bitrate, hq_bitrate, +(this.responseJSON.media[vid].bitrate) > hq_bitrate);
  76.         hq = vid;
  77.         hq_bitrate = this.responseJSON.media[vid].bitrate;
  78.       }
  79.     }
  80.  
  81.     /* build our own html5 player with our own stuff */
  82.     vplayer = document.createElement('video');
  83.       
  84.     console.log(vplayer);
  85.  
  86.     vplayer.src      = this.responseJSON.media[hq].connection[0].href;
  87.     
  88.     //vplayer.poster = document.querySelector('#media-asset-placeholder').src || "";
  89.     vplayer.poster   = document.querySelector('meta[name="twitter:image:src"]').content;
  90.     vplayer.controls = 'yes';
  91.     vplayer.autoplay = false;
  92.     vplayer.preload  = 'none';
  93.  
  94.     vplayer.volume   = '0.8';
  95.  
  96.     vplayer.style.width = '100%';
  97.       
  98.       console.log("asdf=>", vplayer);
  99.  
  100.     /* replace it on the page */
  101.     videoHolderElement = document.querySelector('#media-asset-page-video, .media-player');
  102.     videoHolderElement.parentElement.replaceChild(vplayer, videoHolderElement);
  103.   },
  104.  
  105.   onerror: function(e)
  106.   {
  107.     console.warn('BBC HTML5: Houston, we have an unidentified problem!', e);
  108.   }
  109. });