質問

I am having issues with the following code. I need to be able to show and hide this video using the jQuery show() and hide() but when I do the following the video no longer loads:

  1. Click the Show button
  2. Click the Hide button
  3. Click the Show button - The video doesn't load any more.

Note: I can't use visibility hidden / visible.

<script src="http://player.ooyala.com/v3/c4166b7aafc48b1aa965e31f92fd8bd"></script>

<div id="player-wrapper">
    <div id='myPlayer'></div>
</div>

<button id="button1">Show</button>
<button id="button2">Hide</button>

<script>    
    var myPlayer1 = OO.Player.create('myPlayer', 't5bnBnYTrmAV4SZZSwEVyFn9cvieJFOJ', {      
        width: 618, 
        height: 437
    });
</script>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>
    $("#player-wrapper").hide();

    $("#button1").click(function () {
        $("#player-wrapper").show();
    });

    $("#button2").click(function () {
        $("#player-wrapper").hide();
    });
</script>

正しい解決策はありません

他のヒント

After searching their community website http://community.ooyala.com/t5/Developers-Forum/Show-hide-player-destroy/m-p/1678/highlight/true#M58 I think this might be a way to solve the problem.

<div id="player-wrapper">
    <div id='myPlayer'></div>
</div>

<button id="button1">Show</button>
<button id="button2">Hide</button>

<script src="http://player.ooyala.com/v3/c4166b7aafc48b1aa965e31f92fd8bd"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>
    var myPlayer1;
    $("#player-wrapper").hide();

    $("#button1").click(function () {
        myPlayer1 = OO.Player.create('myPlayer','95eGFoYzoL6qb_jnRK1lkSLUYiKICGg1', {      
            width: 618, 
            height: 437
        });
        $("#player-wrapper").show();
    });

    $("#button2").click(function () {
        $("#player-wrapper").hide();
        myPlayer1.destroy();
    });
</script>

You create the player when you click on the first button and destroying it with the second. There seems to be no real solution to do it in another way.

Hope it helps.

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top