mercredi 24 août 2016

Check if embedded video renders, else show error message

We have been having some issues with customers not being able to see our videos. I originally thought it might be the embed not rendering due to javascript being enabled so I deployed this script, which it helped, but people still sometimes can't see the video.

<noscript class="js-disabled">
  <div class="overlay noscript-overlay" style="display: block;"></div>

  <div class="modal modal-message group modal-warning">

    <div class="modal-title">Sorry, it appears that you have Javascript disabled!</div>

    <p>We use Javascript to bring you awesome content!</p>

    <p>Need to know how to enable Javascript? <a href="http://ift.tt/umXtlQ" target="_blank">Go here.</a></p>

  </div>
</noscript>

But now thinking about it, we decided it might be better to show them links to our content as a script or audio file. My question is, can I check if the embedded video has loaded?

Here is the embed code for the video

<div class="embedded-video" id="wistia_6hhu8myyx6" style="width:711px;height:400px;position:relative;overflow:hidden;"></div>
<script type="text/javascript" src="//fast.wistia.com/static/concat/E-v1,playlist-v1.js"></script>
<script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak.js"></script>
<script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak.api.js"></script>
<script type="text/javascript">
hapyak.playlist.embed("wistia", "6hhu8myyx6", {
  "media_0_0": {
    "autoPlay": false,
    "controlsVisibleOnLoad": true
  },
  "theme": "bare",
  "version": "v1",
  "videoOptions": {
    "autoPlay": true,
    "playerColor": "FB8A27",
    "videoHeight": 400,
    "videoWidth": 711,
    "volumeControl": true
  }
}, function (playlist) {
  playlist.viewer({
    apiKey: "random-string",
    plugins: {
      salesforce: { user: typeof hapyakSalesforceUser !== "undefined" && hapyakSalesforceUser }
    },
    resetVariables: true,
      playlistName: "CERT",
    onLoad: function (viewer) {
      hapyak.responsive(viewer);
    }
  });
});
</script>

Here is how I think I would have to do it

if ('.embedded-video') {
    $('#no-video').hide();
} else { 
    $('#no-video').show();
}


<div id="no-video">
Sorry you're having trouble viewing our videos, maybe try to listen or read our transcripts!
</div>

Just example text, but is there a better way to go about this? Am I able check if the video rendered (I believe it will render the div #embedded-video no matter what, but may not actually show it. So i'm worried, just checking for the div might not be the best solution.

Thanks!

Aucun commentaire:

Enregistrer un commentaire