Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts

    HTML5 Video + Fancybox iPad/iPhone issue

    Hello,
    I seem to be experiencing playback issues with video that pops up in fancybox. The video works great in Desktop browsers but for some reason on iPad/iPhone (iOS devices) the video will play once, but if you close fancybox and reopen to watch the video again, it just shows a black screen. Originally it showed a black screen on iPad even at the beginning, but by wrapping a div around the video tags it was able to play first time. This is why there is a div with display:none; wrapped around the video tag. Any who, the video can be found by navigating to http://www.circleofeducation.com and when you see the first pink slide, click the Play Video button. You will see fancybox open with an HTML5 video inside. You'll see that it works great on Desktop browsers and even Android devices, just not iOS devices. All help would be greatly appreciated. Also, a weird issue happens on the iPad when you close fancybox the first time, you'll see the Academic Blog tab in the menu start twitching. Any help would be greatly appreciated. Code below

    Thanks in advance!
    eberdome

    HTML5

    Code:
    							<div style="display:none;width:800px;height:450px;position:relative">
    		                    <video preload="auto" controls="controls" id="<?php echo $slugish; ?>-video-vid" height="450" width="800">
    								<source type="video/mp4" src="<?php if( is_array($video_file_mp4) ){ foreach($video_file_mp4 as $attachment_id){ $video_file_mp4_url = wp_get_attachment_url( $attachment_id ); echo $video_file_mp4_url; } } ?>" id="mp4" />
    								<source type="video/ogg" src="<?php if( is_array($video_file_ogv) ){ foreach($video_file_ogv as $attachment_id){ $video_file_ogv_url = wp_get_attachment_url( $attachment_id ); echo $video_file_ogv_url; } } ?>" id="ogv" />
    								<p>Your browser does not support HTML5 Video. Please upgrade your browser. If you have questions, please <a href="mailto:info@circleedu.com">contact us</a>. We will get back to you as soon as possible.</p>
    							</video>	
                                </div>

    jQuery/JavaScript

    Code:
    jQuery(document).ready(function () {
    	jQuery("a#<?php echo $slugish; ?>-video-right, a#<?php echo $slugish; ?>-video-left").fancybox({
    		height: 450,
    		width: 800,
    		frameWidth: 800,
    		frameHeight: 400,
    		overlayShow: true,
    		overlayOpacity: 0.7,
    		autoSize: false,
    		type: 'inline',
    		scrolling: 'no',
    		'beforeShow': function () {
    			myInVid = document.getElementById("<?php echo $slugish; ?>-video-vid");
    			myInVid.load();
    		},
    		'afterShow': function () {
    			myInVid.load();
    		}
    	});
    });
    jQuery('#<?php echo $slugish; ?>-video-vid').bind('ended', function () {
    	jQuery.fancybox.close();
    });
    "The problem with troubleshooting is that trouble shoots back."

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    Sorry for the bump... really need help with this. Anybody?
    "The problem with troubleshooting is that trouble shoots back."


  •  

    Posting Permissions

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