In-page embedded video not playing in iOS

[sagekitten85]

I have a mixed in-page gallery with embedded video and images based off this example:
http://www.roadrash.no/hs-support//html-in-page.html

On iOS (iPhone 3 specifically) the video within Highslide will not play, but the second video outside the Highslide code plays fine:
http://kauaigrown.org/dev/vendor-video- ... ndor_id=51

Thanks for any suggestions!

[sagekitten85]

I just tested on an iPhone 4 and having the same issue. Anyone? Why is the video failing to play when it's displayed within Highslide?

[RoadRash]

Hi,

Sorry for the late reply; I've been sick.
You need to use objectType: 'iframe' for embedded videos on iOS. Put the code for the video in its own page and open this page in the Highslide in-page gallery.

[sagekitten85]

Sorry to hear that and thanks for your reply. Highslide support has always been great

I changed the video to objectType: 'iframe' and it is working now on iOS, but I could not find an example of how to display the iframe in an in-page gallery the way I had it before. It pops up in the center of the page, I cannot position it where I want. Also, it makes all following JPG images display at full size instead of constraining them to the gallery width.

My goal is to display a mixed in-page JPG and video gallery (locally hosted video, not Youtube) that will work on desktop and mobile platforms. If I should be using a completely different approach, please let me know!

Thanks!

[torstein.honsi]

Can we see your new page?

[sagekitten85]

Here is the page:
http://kauaigrown.org/dev/vendor-video- ... ndor_id=51

Thanks
Emily

[torstein.honsi]

Your video site uses Flash, so it wouldn't work on iOS: http://kauaigrown.org/dev/video-hs.php

[sagekitten85]

It is working in iOS, I have this code as a fallback from Flash:

Code: Select all

<video controls src="video/Barkaroo-iPhone.m4v" poster="test.jpg" width="640" height="360">
<p>Download video:<a href="video/Barkaroo-iPhone.m4v">MP4</a></p>
</video>

I just can't get the formatting to do what I want now that I changed it to objectType: 'iframe' at Roadrash's suggestion. It pops up in the center of the page, I cannot position it where I want. Also, it makes all following JPG images display at full size instead of constraining them to the gallery width.

Thanks
Emily

[sagekitten85]

Hi,

I'm hoping someone has a chance to check this out... it is playing fine in iOS, just the formatting is a problem.

Thanks!

[RoadRash]

Hi,

Sorry for the late reply.

In the main page
Replace this:

Code: Select all

   // Options for the in-page items
   var inPageOptions = {
      //slideshowGroup: 'group1',
      outlineType: null,
      allowSizeReduction: false,
      wrapperClassName: 'in-page controls-in-heading',
      useBox: true,
      width: 600,
      height: 400,
      targetX: 'gallery-area 10px',
      targetY: 'gallery-area',
      //captionEval: 'this.thumb.alt',
      //numberPosition: 'caption'
   }

with this:

Code: Select all

   // Options for the in-page items
   var inPageOptions = {
      //slideshowGroup: 'group1',
      outlineType: null,
      allowSizeReduction: true,
      wrapperClassName: 'in-page controls-in-heading',
      useBox: true,
      width: 650,
      height: 400,
      targetX: 'gallery-area 10px',
      targetY: 'gallery-area'
   };
   
   var inPageOptionsVideo = {
      //slideshowGroup: 'group1',
      objectType: 'iframe',
      outlineType: null,
      allowSizeReduction: false,
      wrapperClassName: 'in-page controls-in-heading',
      useBox: true,
      width: 650,
      height: 400,
      targetX: 'gallery-area 10px',
      targetY: 'gallery-area'
   };

Replace this:

Code: Select all

<div id="gallery-area" style="width: 620px; height: 500px; margin: 0 auto; border: 1px solid silver"></div>

with this:

Code: Select all

<div id="gallery-area" style="width: 670px; height: 500px; margin: 0 auto; border: 1px solid silver"></div>

Replace this onclick for the video:

Code: Select all

onclick="return hs.htmlExpand(this, {  objectType: 'iframe'})"

with this:

Code: Select all

onclick="return hs.htmlExpand(this, inPageOptionsVideo)"

This is the markup of your video-hs.php page:

Code: Select all

      <object data="flvplayer.swf" width="640" height="360">
      <param name="movie" value="flvplayer.swf">
      <param name="allowFullScreen" value="true" />
      <param name="FlashVars" value="flvurl=video/HanaleiTaro.flv">
      <embed src="flvplayer.swf" allowFullScreen="true" flashvars="flvurl=video/HanaleiTaro.flv" width="640" height="360" />
      
      <video controls src="video/Barkaroo-iPhone.m4v" poster="test.jpg" width="640" height="360">
      <p>Download video:<a href="video/Barkaroo-iPhone.m4v">MP4</a></p>

      </video>
      </object>

You need a head and body section and some CSS.
Try this markup for video-hs.php:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> </title>
<style type="text/css">
body {
   margin: 0;
   padding: 0;
}
video {
   margin-top: -360px; /* same value as object height */
}
</style>
</head>

<body>
      <object data="flvplayer.swf" width="640" height="360">
      <param name="movie" value="flvplayer.swf">
      <param name="allowFullScreen" value="true" />
      <param name="FlashVars" value="flvurl=video/HanaleiTaro.flv">
      <embed src="flvplayer.swf" allowFullScreen="true" flashvars="flvurl=video/HanaleiTaro.flv" width="640" height="360" />
      
      <video controls src="video/Barkaroo-iPhone.m4v" poster="test.jpg" width="640" height="360">
      <p>Download video:<a href="video/Barkaroo-iPhone.m4v">MP4</a></p>

      </video>
      </object>
</body>
</html>

[sagekitten85]

That was it! Thank you again for all your help. I really appreciate your excellent support. FYI, I had to take out the css in video-hs.php to get it working in iOS.

[RoadRash]

This is how it looks in Safari Mobile (screenshot from iPad 2) without the CSS for the video tag:

2012-02-25_1227.png (73.17 KiB) Viewed 1080 times

[sagekitten85]

Thanks, I had not tested on iPad / iOS 5. On iPhone 3 running iOS 4.2.1 and iPhone 4 running iOS 4.3.5, the CSS bumps the video up so the bottom of the video is barely visible at the top of the frame. I've added the CSS again.
http://kauaigrown.org/dev/vendor-video- ... ndor_id=51

[sagekitten85]

Screenshot from iPhone 4 on iOS 4.3.5

photo.PNG (67.9 KiB) Viewed 1032 times

[RoadRash]

Ah – now I see the cause of the problem. You have placed the video tag inside the object code – it must be the other way around; the object/embed code must be placed inside the video tag.
Tutorials:
http://camendesign.com/code/video_for_everybody
http://www.sitepoint.com/html5-video-cr ... all-backs/
Note that you need to use two different video formats than the one you are using now (.ogg + .mp4).

When doing this correct you will only need this CSS:
body {margin: 0; padding: 0;}

The reason for the misplacement of the video seems to be that iOS 5 actually adds the height of the embed code before it adds the video itself, while iOS below 5 don't do this. The CSS with the negative margin for the video tag fixed this for iOS 5, but made the video invisible in iOS below 5. This is not a Highslide issue - the same thing happens outside the Highslide popup.