Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

js: Render <video> inner HTML when no source is supported.

Browse source 
The HTML inside <video> is meant to be rendered by browsers that don't
support the tag at all.  You have to respond to the JavaScript error event
to deal with browsers that support video, but no available source.  See
<https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded>.
This commit is contained in:
Brett Smith 2016-12-31 15:19:59 -05:00
parent 034a60be9b
commit 619bc033bc
3 changed files with 23 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
www/conservancy/static/css/conservancy-bigscreen.css
View file

@ -50,7 +50,7 @@ dd {
margin: 0 0 2.5em 11.5em;
}
video.small-right {
.small-right {
float: right;
height: auto;
width: 25%;
@ -58,7 +58,7 @@ video.small-right {
margin-bottom: .4em;
}
video.medium-right {
.medium-right {
float: right;
height: auto;
width: 50%;

8
www/conservancy/static/css/conservancy.css
View file

@ -452,3 +452,11 @@ dd {
.fundraiser-top-text em {
font-size: 110%;
}
/* Fallback elements created by conservancy.js when no video source is
supported. */
div.small-right, div.medium-right {
border: thick solid #577632;
padding: .3em;
text-align: center;
}

13
www/conservancy/static/js/conservancy.js
View file

@ -6,6 +6,19 @@
*/
$(document).ready(function() {
/* When the browser doesn't support any video source, replace it
with the HTML inside the <video> element. */
var showVideoInnerHTML = function(event) {
var video = event.target.parentNode;
var div = document.createElement('div');
div.classList = video.classList;
div.innerHTML = video.innerHTML;
video.parentNode.replaceChild(div, video);
}
$('video').each(function(index, video) {
$('source', video).last().on('error', showVideoInnerHTML);
});
/* Set up the fundraiser multiprogressbar near the top of each page. */
var siteFinalGoal = $('span#site-fundraiser-final-goal').text();
var noCommaSiteFinalGoal = parseInt(siteFinalGoal.replace(/,/g, ""));