It is currently Fri Apr 25, 2014 4:27 am Advanced search

In-page embedded video not playing in iOS

Technical support, bug reports, feature requests and more.

In-page embedded video not playing in iOS

Postby sagekitten85 » Sat Jan 28, 2012 3:06 am

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
 
Posts: 41
Joined: Fri Dec 03, 2010 11:36 pm

Re: In-page embedded video not playing in iOS

Postby sagekitten85 » Tue Jan 31, 2012 9:03 pm

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?
sagekitten85
 
Posts: 41
Joined: Fri Dec 03, 2010 11:36 pm

Re: In-page embedded video not playing in iOS

Postby RoadRash » Sat Feb 04, 2012 8:53 pm

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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8183
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: In-page embedded video not playing in iOS

Postby sagekitten85 » Wed Feb 08, 2012 4:03 am

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!
sagekitten85
 
Posts: 41
Joined: Fri Dec 03, 2010 11:36 pm

Re: In-page embedded video not playing in iOS

Postby torstein.honsi » Mon Feb 13, 2012 12:37 pm

Can we see your new page?
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9182
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: In-page embedded video not playing in iOS

Postby sagekitten85 » Wed Feb 15, 2012 4:10 am

sagekitten85
 
Posts: 41
Joined: Fri Dec 03, 2010 11:36 pm

Re: In-page embedded video not playing in iOS

Postby torstein.honsi » Thu Feb 16, 2012 11:53 am

Your video site uses Flash, so it wouldn't work on iOS: http://kauaigrown.org/dev/video-hs.php
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9182
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: In-page embedded video not playing in iOS

Postby sagekitten85 » Fri Feb 17, 2012 4:11 am

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
 
Posts: 41
Joined: Fri Dec 03, 2010 11:36 pm

Re: In-page embedded video not playing in iOS

Postby sagekitten85 » Wed Feb 22, 2012 11:23 pm

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!
sagekitten85
 
Posts: 41
Joined: Fri Dec 03, 2010 11:36 pm

Re: In-page embedded video not playing in iOS

Postby RoadRash » Thu Feb 23, 2012 11:38 am

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>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8183
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: In-page embedded video not playing in iOS

Postby sagekitten85 » Fri Feb 24, 2012 11:26 pm

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.
sagekitten85
 
Posts: 41
Joined: Fri Dec 03, 2010 11:36 pm

Re: In-page embedded video not playing in iOS

Postby RoadRash » Sat Feb 25, 2012 1:38 pm

This is how it looks in Safari Mobile (screenshot from iPad 2) without the CSS for the video tag:
2012-02-25_1227.png
2012-02-25_1227.png (73.17 KiB) Viewed 1374 times
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8183
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: In-page embedded video not playing in iOS

Postby sagekitten85 » Mon Feb 27, 2012 9:33 pm

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
 
Posts: 41
Joined: Fri Dec 03, 2010 11:36 pm

Re: In-page embedded video not playing in iOS

Postby sagekitten85 » Mon Feb 27, 2012 9:44 pm

Screenshot from iPhone 4 on iOS 4.3.5

photo.PNG
photo.PNG (67.9 KiB) Viewed 1326 times
sagekitten85
 
Posts: 41
Joined: Fri Dec 03, 2010 11:36 pm

Re: In-page embedded video not playing in iOS

Postby RoadRash » Tue Feb 28, 2012 1:36 am

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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8183
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway


Return to Highslide JS Usage

Who is online

Users browsing this forum: No registered users and 2 guests