Changeset - 619bc033bc52
[Not reviewed]
0 3 0
Brett Smith (brett) - 4 years ago 2016-12-31 20:19:59
brett@sfconservancy.org
js: Render <video> inner HTML when no source is supported.

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>;.
3 files changed with 23 insertions and 2 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy-bigscreen.css
Show inline comments
...
 
@@ -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%;
www/conservancy/static/css/conservancy.css
Show inline comments
...
 
@@ -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;
 
}
www/conservancy/static/js/conservancy.js
Show inline comments
...
 
@@ -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, ""));
0 comments (0 inline, 0 general)