0

Objective What i am trying to do is catch the "Failed to load resource" error and put it in an alert window.

Issue I am trying to catch a video that does not exist. Try catch is not catching the exception.

Background I am trying to play through an array of videos, i continue to the next video when the previous one finishes. The issue is there wont always be a video for every element in the array. I have tried placing the try catch around just the play function. I have also tried placing the entire contents of the PlayArray() function in the try but no success, and i also tried placing the try around where the PlayArray function calls itself. I am having no luck with the try catch, catching the exception.

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- modernize older browsers -->
        <script type="text/javascript" src="js/modernizr.js"></script>

        <title>Starter File</title>

        <!-- enable responsive web design -->
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />

        <!-- stylesheets -->
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link media="only screen and (max-width: 980px)" href="css/tablet.css" type="text/css" rel="stylesheet"/>
        <link media="only screen and (max-width: 700px)" href="css/mobile.css" type="text/css" rel="stylesheet"/>
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>

        <!-- jQuery -->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/videoPlayerQeued.js"></script>
    </head>

    <body>
        <div class="top-banner">
            <div class="logo-container">
                <img src="images/fantasytv-logo.png"/>
                <div>your team, on your time</div>
            </div>

            <div class="provider-container-interface">
                <img src="images/yahoo-signed-in.png"/>
            </div>

        </div><!--end of top banner -->

        <div class="interface-container">
            <ul class="menu">
                <li>MY LEAGUES</li>
                <li>SETTINGS</li>
                <li>SIGN OUT</li>
            </ul><!--end menu-->
            <div class="fix"></div>

            <div class="date-shift-banner">
                <div class="left-arrow">
                    <img src="images/left-arrow.png"/>
                </div>

                <div class="date">
                    June 23, 2013
                </div>

                <div class="right-arrow">
                    <img src="images/right-arrow.png"/>
                </div>
            </div><!--end date banner-->

            <div class="stats-profile-container">
                <div class="stats-container">
                    <div class="stats-title-container">
                        <div><div class="padding-stat-title-offense">OFFENSE</div></div>
                        <div><div class="padding-stat-title-pitching">PITCHING</div></div>
                    </div>
                    <div class="fix"></div>

                    <table class="offense">

                        <tr>
                            <td></td>
                            <td>R</td>
                            <td>AVG</td>
                            <td>H</td>
                            <td>HR</td>
                            <td>SB</td>
                            <td>RBI</td>
                            <td></td>
                        </tr>

                        <tr>
                            <td></td>
                            <td>0</td>
                            <td>.000</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td></td>
                        </tr>
                    </table><!--end stats table-->

                    <table class="pitching">
                        <tr>
                            <td></td>
                            <td>W</td>
                            <td>L</td>
                            <td>H</td>
                            <td>K</td>
                            <td>WHIP</td>
                            <td>ERA</td>
                            <td></td>
                        </tr>

                        <tr>
                            <td></td>
                            <td>0</td>
                            <td>.000</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td></td>
                        </tr>
                    </table><!--end stats table-->

                </div><!--end stats container-->

                <div class="player-profile-container">
                    <img class="player-picture" src=""/>

                    <div class="player-name-team-container">
                        <div class="player-name"></div>
                        <div class="player-team"></div>
                    </div><!-- end player name team container -->
                </div><!--end player profile container-->
                <div class="fix"></div>
            </div><!--end stats and profile container-->

            <div class="video-roster-container">
                <div class="video-container">
                    <div class="video-container-padding">
                        <div class="fantasy-team">TEAM: <span>YANKEEFAN</span></div>
                        <div id="video-player">
                            <video  id="play-video" width="588" height="318" controls autobuffer>
                                        Your browser does not support the video tag.
                            </video>    <!--end video container -->

                        </div><!--end video player-->
                    </div><!--end video container padding-->
                </div><!--end video container-->

                <div class="roster-container">
                <div class="play-all-container">
                <div class="play-all"><img src="images/play-all-arrow.png"/></div><div class="watch-all-players">Watch All Players</div>
                <div class="fix"></div>
                </div>

                    <ul class="player-video-buttons">
                        <li id="test"><span>C</span><span>Willin Rosario</span><span class="team">Colorado Rockies</span></li>
                        <li><span>1B</span><span>Chris Davis</span><span class="team">Baltimore Orioles</span></li>
                        <li><span>2B</span><span>Ian Kinsler</span><span class="team">Detroit Tigers</span></li>
                        <li><span>SS</span><span>Derek Jeter</span><span class="team">New York Yankees</span></li>
                        <li><span>3B</span><span>Evan Longoria</span><span class="team">Tampa Bay Rays</span></li>
                        <li><span>OF</span><span>Mike Trout</span><span class="team">Los Angeles Angels</span></li>
                        <li><span>OF</span><span>Josh Hamilton</span><span class="team">Los Angeles Angels</span></li>
                        <li><span>OF</span><span>Michael Cuddyer</span><span class="team">Colorado Rockies</span></li>
                        <li><span>U</span><span>David Ortiz</span><span class="team">Boston Red Sox</span></li>
                        <li><span>P</span><span>Clayton Kershaw</span><span class="team">Los Angeles Dodgers</span></li>
                        <li><span>P</span><span>Matt Harvey</span><span class="team">New York Mets</span></li>
                    </ul>

                </div><!--end roster container-->
                <div class="fix"></div>
            </div><!-- end video roster container-->
        </div><!--end interface container-->
    </body>
</html>

JAVASCRIPT

$(document).ready(function(){
    $('.play-all').on("click", function(){
        var videoFileArray;
        var pictureFileArray;
        var videoPlayer = document.getElementById('video-player'); //current video
        var rosterArray = LoadRoster();
        rosterArray = FormatArray(rosterArray);
        videoFileArray = AddMovieExtensions(rosterArray);
        PlayArray(0, videoPlayer, videoFileArray);
    });
})


function PlayArray(index, ele, array, listener){
        var videoTag = '<video  id="play-video" width="588" height="318" controls>          <source src="{fileName}" type="video/mp4">Your browser does not support the video tag.     </video>';

        videoTag = videoTag.replace('{fileName}', array[index]);
        $('#video-player').empty();
        $('#video-player').html(videoTag);
        currentVideo = document.getElementById('play-video'); 
        try{
        currentVideo.play();
        }
        catch(e){
            alert(e);
        }
        if(index >= array.length){
            alert('End of videos');
        }
        index++
        listener = currentVideo.addEventListener('ended',function(){
                PlayArray(index,ele,array,listener);
        }, false);
}

function AddMovieExtensions(roster){
    var rosterArrayFormatted = [];
    for(var i = 0; i < roster.length; i++ ){
        rosterArrayFormatted[i] = roster[i] + '.mov';
    }
    return rosterArrayFormatted;
}


function LoadRoster(){
//Loads current roster into memory from button labels
    var currentC = "Willin Rosario";
    var current1B = "michael Cuddyer";
    var current2B = "current 2b";
    var currentSS = "current SS";
    var current3B = "current TB";
    var currentOF1 = "OF1";
    var currentOF2 = "OF2";
    var currentOF3 = "OF3";
    var currentU = "This is A U";
    var currentP1 = "P1";
    var currentP2 = "josh hamilton";
    var rosterArray = [currentC, current2B, current1B, currentP2];
    // var rosterArray = [currentC, current1B, current2B, currentSS, current3B, currentOF1, currentOF2, currentOF3, currentU, currentP1, currentP2];
    return rosterArray;
}

function FormatArray(roster){
//remove spaces and lowercase all letters
var rosterArrayFormatted = [];
    for(var i = 0; i < roster.length; i++ ){
        rosterArrayFormatted[i] = roster[i].replace(/\s/g, '').toLowerCase();
    }
return rosterArrayFormatted;
}

function videoTimeCounterUpdate(clipObject){
    var clipTime = clipObject.currentTime;
    clipTime = clipTime.toFixed(1);
    var runTimeUpdate = setTimeout(videoTimeCounterUpdate, 100); //Round to .x digit    
}
hfrog713
  • 400
  • 1
  • 5
  • 18
  • Have you thought of removing the null elements from the array before playing it? http://stackoverflow.com/questions/281264/remove-empty-elements-from-an-array-in-javascript – Wa. Feb 01 '14 at 03:36
  • yup i was doing that in the development proces, but in my final version the names will be populated even if there are videos available.....idk if i can check this beforehand but i thought my best solution would be to put the play function in a try catch and then return an alert saying there is no video for that player and then move on to the next video. – hfrog713 Feb 01 '14 at 15:01
  • Why are you using a recursive function here. You have array beforehand. Just loop for each element in array and call non-recursive Play method. – udit bansal Feb 01 '14 at 15:12
  • I had written this using a for-loop for the length of the array and then had a Play video function called but because the for loop continues running the videos never pass ready state 0, until the last video resulting in only the last video playing. – hfrog713 Feb 01 '14 at 21:36

1 Answers1

1

if you add the following to where you instantiate the video player it will trap that error for you and you can take action accordingly

document.getElementById("play-video").addEventListener('error', ooops, false);

function ooops() {
    console.log(document.getElementById("play-video").error.code)  
    // 4 will be returned if the video isn't found
    // MEDIA_ERR_ABORTED: 1
    // MEDIA_ERR_NETWORK: 2
    // MEDIA_ERR_DECODE: 3
    // MEDIA_ERR_SRC_NOT_SUPPORTED: 4
    // MEDIA_ERR_ENCRYPTED: 5
    // just .error will give you the array of possible values as well as the .code
}
Offbeatmammal
  • 7,970
  • 2
  • 33
  • 52