jeudi 26 mars 2015

Switching between flash and iframe version of live streaming Ustream with javascript in wordpress


I'm tryng to make a button for switching between flash version and iframe version of a ustream live channel that i have embed in my personal site


flash code:



<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="392" id="utv786564"><param name="flashvars" value="autoplay=false&amp;brand=embed&amp;cid=3064708"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/viewer.swf"/><embed flashvars="autoplay=false&amp;brand=embed&amp;cid=3064708" width="640" height="392" allowfullscreen="true" allowscriptaccess="always" id="utv786564" name="utv_n_665786" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash" /></object>


iframe code:



<iframe width="640" height="392" src="http://ift.tt/1Hy5IR6" scrolling="no" frameborder="0" style="border: 0px none transparent;"> </iframe>
<br /><a href="http://www.ustream.tv" style="font-size: 12px; line-height: 20px; font-weight: normal; text-align: left;" target="_blank">Broadcast live streaming video on Ustream</a>


For this scope i'm using following code:


javascript:



var newHTML = 'html2';
var oldHTML = document.getElementById('divtabone').innerHTML;

function changeText3(){
var currentHTML = document.getElementById('divtabone').innerHTML;
if (currentHTML!=newHTML)
{
document.getElementById('divtabone').innerHTML = newHTML;
}
else
{
document.getElementById('divtabone').innerHTML = oldHTML;
}
}


html:



<div id='divtabone'>html1</div>
<input type='button' onclick='changeText3()' value='change Html'/>


replacing html1 and html2 with flash and iframe code reported above


working demo:


http://ift.tt/1BgU3Pq


I have inserted this code in my test site wordpress:


http://ift.tt/1xv86VC


but how can see when i click change html button i can change video from flash version to iframe version one time only because if i reclick and i want return to flash version it remain in iframe version i have made a demo with codes here:


http://ift.tt/1BgU6dW


the code that i have inserted in functions.php file of wordpress is following:



function mia_on_load_script()
{
// Not our page, do nothing
if( !is_page( 'test' ) )
return;
?>

<script type="text/javascript">
var newHTML = '<div id="1" style="margin-left: 0px; padding: 0px; float: left; width: 640px; height: 392px; border: 0px;"><iframe width="640" height="392" src="http://ift.tt/1Hy5IR6" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe></div><div id="2" style="margin-left: 0px; padding: 0px; float: left; width: 320px; height: 392px; border: 0px;"><iframe style="border: 0 none transparent;" src="//www.ustream.tv/socialstream/3064708" width="320" height="392" frameborder="no"></iframe></div>';
var oldHTML = document.getElementById('divtabone').innerHTML;

function changeText3(){
var currentHTML = document.getElementById('divtabone').innerHTML;
if (currentHTML!=newHTML)
{
document.getElementById('divtabone').innerHTML = newHTML;
}
else
{
document.getElementById('divtabone').innerHTML = oldHTML;
}
}
</script>


<?php
};
add_action( 'wp_head', 'mia_on_load_script' );

?>


html in page http://ift.tt/1xv86VC :



<div id="divtabone"><div id="1" style="margin-left: 0px; padding: 0px; float: left; width: 640px; height: 392px; border: 0px;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="360" id="utv786564"><param name="flashvars" value="autoplay=false&amp;brand=embed&amp;cid=3064708"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/viewer.swf"/><embed flashvars="autoplay=false&amp;brand=embed&amp;cid=3064708" width="640" height="360" allowfullscreen="true" allowscriptaccess="always" id="utv786564" name="utv_n_665786" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash" /></object></div> <div id="2" style="margin-left: 0px; padding: 0px; float: left; width: 320px; height: 392px; border: 0px;"><iframe style="border: 0 none transparent;" src="//www.ustream.tv/socialstream/3064708" width="320" height="392" frameborder="no"></iframe></div></div>
<input type='button' onclick='changeText3()' value='click to change'/>


Why in wordpress don't work ? Cold be a problem of caching? Any other solution to resolve problem? thanks





Aucun commentaire:

Enregistrer un commentaire