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

Having trouble with Vidyard playlist example

  • December 19, 2016
  • 1 reply
  • 840 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

    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.

    Legend
    December 19, 2016

    Yeah. I just get a javascript void error. Here is an updated pen.


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


    Have you tried the script on your own server?