JSFiddle - React, Tailwind, and code Playground
by kalmarsh80
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JW Player Problem</title>
<script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script>
<script type="text/javascript">
var toggle = false;
function ShowHideDiv()
{
var divObj=document.getElementById("outerdiv")
var element = document.getElementById('container')
var btn=document.getElementById("toggleBtn")
if (toggle) {
toggle = false;
divObj.style.display = "block";
btn.innerHTML = "Hide JW Player";
} else {
toggle = true;
divObj.style.display = 'none';
btn.innerHTML = "Show JW Player";
}
}
function LoadContent() {
jwplayer('container').load({file:'http://content.bitsontherun.com/videos/6O7cYVpH-1ahmry41.mp4'}).play();
}
</script>
<style>
body {margin:120px;font-family:Verdana;font-size:10pt}
li {margin-bottom:8px}
</style>
</head>
<body>
<h1>Video not shown if playback initiated while DOM element not visible (IE)</h1>
<h2>Problem Description</h2>
<p>If playback is initiated while the player is hidden in the DOM, the video will not be visible when the player is shown.</p>
<h4>To replicate the issue:</h4>
<ol>
<li>Click the "Hide JW Player" button to hide the div containing the player</li>
<li>Click the "Load Content" button. The audio from the content will start to play</li>
<li>Click the "Show JW Player" button. The player will continue playing, but with no video (the video window appears blank)</li>
</ol>
<em>Replicated in IE 9.0.8112.16421, Windows 7 x64, Flash 11.1.102.55</em>
<hr>
<button name="toggleBtn" id="toggleBtn" onclick="ShowHideDiv()" style="cursor:pointer">Hide JW Player</button>
<button onclick="LoadContent()" style="cursor:pointer">Load...