www.webdeveloper.com
Results 1 to 2 of 2

Thread: Stop video from playing when new tab is clicked

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Location
    North East US
    Posts
    15

    Stop video from playing when new tab is clicked

    Hi,
    I have a page with tabs and on each tab there is a video (FLV). I'd like the videos to stop playing when a user clicks on a tab.

    This functions perfectly in Chrome. In Firefox and Safari the videos continue to play when a user clicks another tab. And in IE the FLV controls only appear on the video on tab 1, so I can't even play the other videos.

    I'd like to know how I can stop the videos when a new tab is clicked in Firefox and Safari. And how can I make the FLV controls appear for all videos in IE?

    Any help would be greatly appreciated! Thank you and happy New Year!

    My code:

    <div id="tabs">

    <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 5</li>
    </ul>

    <div class="TabbedPanelsContentGroup">

    <div class="TabbedPanelsContent">

    <div class="media_content">

    <div class="media_left" id="Tab1">


    <div class="clear"></div>

    </div><!-- end media_left -->

    <div class="media_right">

    </div><!-- end media right -->

    </div><!-- end media_content -->

    </div><!-- end Tab -->

    <div class="TabbedPanelsContent">

    <div class="media_content">

    <div class="media_left" id="Tab2">


    <div class="clear"></div>

    </div><!-- end media_left -->

    <div class="media_right">

    </div><!-- end media right -->

    </div><!-- end media_content -->

    </div><!-- end Tab -->




    <div class="TabbedPanelsContent">

    <div class="media_content">

    <div class="media_left" id="Tab3">


    <div class="clear"></div>

    </div><!-- end media_left -->

    <div class="media_right">

    </div><!-- end media right -->

    </div><!-- end media_content -->

    </div><!-- end Tab -->




    <div class="TabbedPanelsContent">

    <div class="media_content">

    <div class="media_left" id="Tab4">


    <div class="clear"></div>

    </div><!-- end media_left -->

    <div class="media_right">

    </div><!-- end media right -->

    </div><!-- end media_content -->

    </div><!-- end Tab -->

    <div class="TabbedPanelsContent">

    <div class="media_content">

    <div class="media_left" id="Tab5">


    <div class="clear"></div>

    </div><!-- end media_left -->

    <div class="media_right">

    </div><!-- end media right -->

    </div><!-- end media_content -->

    </div><!-- end Tab -->

    </div><!-- end TabbedPanels1 -->

    </div><!-- end tabs -->


    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:0});
    </script>


    <script>
    //loadOverLay();




    function createVideoTag(mName, elementName){

    var moviename ='/subs/podcasts/'+mName;
    var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad")> -1;
    var vplayer = '';
    if (isiPad) {


    vplayer = '<video width="380" height="240" controls="controls" id="movie">'+
    ' <source src="'+moviename+'.mp4" type="video/mp4" />'+
    ' </video>';

    }else{


    vplayer = '<object type="application/x-shockwave-flash" data="/subs/podcasts/player_flv_maxi.swf" width="380" height="240" id="flvPlayer">'+
    '<param name="movie" value="/subs/podcasts/player_flv_maxi.swf" />'+
    '<param name="allowFullScreen" value="true" />'+
    '<param name="FlashVars" value="flv='+moviename+'.flv&autoplay=0&showtime=1&showfullscreen=1&width=380&height=240&showstop=1& showvolume=1&title=Play&bgcolor1=7F7F7F&bgcolor2=7F7F7F&playercolor=7F7F7F&buttoncolor=444&buttonove rcolor=444&slidercolor1=444&slidercolor2=444&sliderovercolor=444&loadingcolor=7F7F7F&titlesize=40&sh owtitleandstartimage=0&buffer=0" />'+
    '<embed class="ieplayer" src="/subs/podcasts/player_flv_maxi.swf?movie='+moviename+'.flv&autoplay=0&showtime=1&showfullscreen=1&width=380&height= 240&showstop=1&showvolume=1&title=Play&bgcolor1=7F7F7F&bgcolor2=7F7F7F&playercolor=7F7F7F&buttoncolo r=444&buttonovercolor=444&slidercolor1=444&slidercolor2=444&sliderovercolor=444&loadingcolor=7F7F7F& titlesize=40&showtitleandstartimage=0&buffer=0" />'+
    '</object>';


    }

    if(document.getElementById(elementName)){
    document.getElementById(elementName).innerHTML = '';
    document.getElementById(elementName).innerHTML = vplayer;
    }
    }

    createVideoTag('video1','Tab1');
    createVideoTag('video2','Tab2');
    createVideoTag('video3','Tab3');
    createVideoTag('video4','Tab4');
    createVideoTag('video5','Tab5');



    </script>

  2. #2
    Join Date
    Feb 2012
    Location
    North East US
    Posts
    15
    Hoping someone might be able to help with this. Having absolutely no luck with any browser other than Google Chrome :/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles