Skip to main content
Boss DJ
Boss DJ
Known Participant
December 19, 2016
Answered

Having trouble with Vidyard playlist example

  • December 19, 2016
  • 1 reply
  • 833 views

Hey all,

Like the title says I'm having some trouble with a working video playlist demo from Vidyard. There seems to be some javascript errors but I'm quite unfamiliar with these. The working demo from Vidyard works perfectly but the code provided brings errors. I've loaded it into codepen and on page load the first video works but clicking either link brings more errors. Below is a link to the demo and below that is a link to codepen.

https://www.vidyard.com/blog/video-players-demand-page-performance/#main

http://codepen.io/anon/pen/NbozJp

Thanks in advance,

    This topic has been closed for replies.
    Correct answer osgood_

    Try the code below:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script>

    function getEmbedCode(uuid) {

    var script=document.createElement('script');

    script.type='text/javascript';           

    script.id='vidyard_embed_code_'+uuid;

    script.src='https://play.vidyard.com/'+uuid+'.js?v=3.1&type=inline';  

    return script;

    }

    function changePlayer(modalid,uuid) {

    document.getElementById(modalid).innerHTML = "";

    $("#"+modalid).append(getEmbedCode(uuid));

    }

    </script>

    <ul>

    <li><a href="javascript:void(0);" onclick="changePlayer('video_container_9RcFEGMolLKHMGxMCuMcWg','hedIuHeKRKySm1qx9xXV7w');">Video 1</a></li>

    <li><a href="javascript:void(0);" onclick="changePlayer('video_container_9RcFEGMolLKHMGxMCuMcWg','9RcFEGMolLKHMGxMCuMcWg');">Video 2</a></li>

    </ul>

    <div style="height: 360px;">

    <div id="video_container_9RcFEGMolLKHMGxMCuMcWg">

    <script type="text/javascript" id="vidyard_embed_code_9RcFEGMolLKHMGxMCuMcWg" src="//play.vidyard.com/9RcFEGMolLKHMGxMCuMcWg.js?v=3.1&type=inline"></script>

    </div>

    </div>

    1 reply

    O
    osgood_Correct answer
    Legend
    December 19, 2016

    Try the code below:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script>

    function getEmbedCode(uuid) {

    var script=document.createElement('script');

    script.type='text/javascript';           

    script.id='vidyard_embed_code_'+uuid;

    script.src='https://play.vidyard.com/'+uuid+'.js?v=3.1&type=inline';  

    return script;

    }

    function changePlayer(modalid,uuid) {

    document.getElementById(modalid).innerHTML = "";

    $("#"+modalid).append(getEmbedCode(uuid));

    }

    </script>

    <ul>

    <li><a href="javascript:void(0);" onclick="changePlayer('video_container_9RcFEGMolLKHMGxMCuMcWg','hedIuHeKRKySm1qx9xXV7w');">Video 1</a></li>

    <li><a href="javascript:void(0);" onclick="changePlayer('video_container_9RcFEGMolLKHMGxMCuMcWg','9RcFEGMolLKHMGxMCuMcWg');">Video 2</a></li>

    </ul>

    <div style="height: 360px;">

    <div id="video_container_9RcFEGMolLKHMGxMCuMcWg">

    <script type="text/javascript" id="vidyard_embed_code_9RcFEGMolLKHMGxMCuMcWg" src="//play.vidyard.com/9RcFEGMolLKHMGxMCuMcWg.js?v=3.1&type=inline"></script>

    </div>

    </div>

    Boss DJ
    Boss DJAuthor
    Known Participant
    December 19, 2016

    Thanks for the reply. Unfortunately I'm getting the same results as before. The first video plays but if any of the links are clicked the video disappears.

    O
    osgood_
    Legend
    December 19, 2016

    Boss DJ wrote:

    Thanks for the reply. Unfortunately I'm getting the same results as before. The first video plays but if any of the links are clicked the video disappears.

    I just tested the script and it works fine for me.......are you waiting long enough for the 2nd video to appear. For me it appears instantly but if you have dodgy connection is may take a few seconds to load.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices