I use a gallery service which provides videos which supposedly can be seen on the iPhone / iPad. I can see the videos through their site, but using the embed code produces a blank spot on a blog or website. Apparently it requires more than adding the embed code directly.
Currently I have pages in FW5 with the embed code with I then link to and display in ScriptyLightbox on the pages where I want them. According to the support email I received I need to add a bit of java to get everything to work properly. Unfortunately they didn’t specify the code and I am unable to figure it out. If anyone has any suggestions (I am not even sure where I’d add the code in FW) on how to proceed, I’d really appreciate it.
Here is the email I received:
Yes, you can use Phanfare to embed videos that will play on the iPad, but it is a little more complicated than just grabbing the code.
You need to get the URL of the video file via our web organizer. To do this, sign in to www.phanfare.com and select the video. Then expand the Links section in the image properties on the right. Then click on Video Files. It will bring up a dialog with URLs for the various video qualities. Copy the one you want to show.
Then you need to put that into a video tag in your HTML. It should look something like this:
Where the src value above should be replaced by the URL of your video.
That will put the video into the page in a way that the iPad can view it. The tricky part is that you need to have some way to do that for viewers coming from an iPad, and use the standard embedding code for other devices. You can do this in java-script by checking the user-agent. It does require writing a bit of code. If that’s not possible, you are probably better off using a third party HTML5 video player, like http://videojs.com/ – it handles playing the video and falling back to the flash version when necessary.
Copy the code part they sent you into a text editor. Get the opening <video> and every thing inside that and the closing </video>. Then
do as they suggest, copy the URL of your actual video files from the
file listing on their site. Back in your text editor, highlight
everything inside the quotes following the src= part of the code,
delete it, and paste in the URL of your video. When you’re done, you
should see <source src="your/url/here" type="video/mp4">. Now copy
that whole string of text, and back in Freeway, use Insert / Markup
Item and paste the code. When you okay that dialog, you’ll see a 100px
square in the middle of the screen. Move it where you want the video
to appear, and make it the dimensions of your movie. You won’t see
anything inside it except a little H in the upper left corner. Preview
in Safari, and you should see the movie and it should play.
Walter
On Jan 12, 2011, at 8:59 AM, george wrote:
Unfortunately they didn’t specify the code and I am unable to figure
it out. If anyone has any suggestions (I am not even sure where I’d
add the code in FW)
I was able to get the video to play in FW fine. The question is, how to set it up so ScriptyLightbox can play either the embeded version (which is flash) or the mp4 version on iPhone/iPad. I believe that is what the iPhone action does (but I want it in the lightbox).
If you put the flash code inside the video tag, it will just work.
Browsers that support the video tag will prefer and only show the mp4,
and the sad lot that don’t will see the flash and ignore the mp4 (and
the video tag, too).
Your finished code should look like this:
<video width="320" height="240" controls>
<source src="your/video.mp4" type="video/mp4">
<!-- Awful Flash Code Here -->
<object classid="...">
<params ...>
<embed ...>
</embed>
</object>
<!-- end of flash -->
</video>
You would put all of this together inside your Markup Item. Ideally,
this would be best served in an HTML5 DOCTYPE page, but I don’t think
it matters much in practice, because the browsers you are concerned
about don’t understand HTML5 yet, and won’t for several years.
Walter
On Jan 12, 2011, at 10:43 AM, george wrote:
Walter,
I was able to get the video to play in FW fine. The question is,
how to set it up so ScriptyLightbox can play either the embeded
version (which is flash) or the mp4 version on iPhone/iPad. I
believe that is what the iPhone action does (but I want it in the
lightbox).
Ok, I can get the lightbox to show either a QT or Flash version depending on the browser (if it doesn’t have QT it shows the embeded flash video). One weird thing, the audio continues if I close the lightbox (both QT and Flash).
Unfortunately, on the iPad I still don’t get a video to play (now I have a black area instead of white). Do I need code for the iPad to detect the video? I’ve never had luck with ScriptyLightbox on iPhone in the past so perhaps I’m doing something wrong.
I show the code if someone tells me how to share it in the green box.
To get the green box, put a row of tildes (at least four) followed by
a return, then your code, then another return, then a matching number
of tildes after that followed by a return.
If you’re doing this one the Web, you’ll see the live preview show
what you’re going to send. If it doesn’t look right there, then go to http://gist.github.com
and paste your code there, then copy the URL it gives you, and paste
it into your message on Freewaytalk all by itself on one line. There’s
a translator in the Web formatter that will turn it into a visible
snippet on screen.
Walter
On Jan 12, 2011, at 12:11 PM, george wrote:
Ok, I can get the lightbox to show either a QT or Flash version
depending on the browser (if it doesn’t have QT it shows the embeded
flash video). One weird thing, the audio continues if I close the
lightbox (both QT and Flash).
Unfortunately, on the iPad I still don’t get a video to play (now I
have a black area instead of white). Do I need code for the iPad to
detect the video? I’ve never had luck with ScriptyLightbox on
iPhone in the past so perhaps I’m doing something wrong.
I show the code if someone tells me how to share it in the green box.
Perhaps if we take it back a step. How can I get ScriptyLightbox to show videos on iPad and a browser without QT? Forget trying to use videos hosted on a gallery, I’ll put them on my server.
What happens if you use the Freeway FLV Action on a separate page,
apply the PHP Make Insert Page Action to that separate page (checking
the Preserve Head Content option) and make your link from your
lightbox thumbnail to that cut-down page, rather than directly to the
Flash/H264 content itself?
Walter
On Jan 13, 2011, at 10:37 AM, george wrote:
I am using ScriptyLightbox.
Perhaps if we take it back a step. How can I get ScriptyLightbox to
show videos on iPad and a browser without QT? Forget trying to use
videos hosted on a gallery, I’ll put them on my server.
I’m confused. I don’t have any FLV files. I have QT files which are uploaded to an online gallery which turns them into flash for showing on their site or embed code. They also provide links to the m4v versions stored on their server.
Take the H264 files, and use them in the Softpress FLV Action in place
of FLV files. (Dirty little secret: FLV == H264.) That will publish a
Flash wrapper, along with the fallback code to allow iDevices to see
the same movie. I think that will give you what you’re looking for here.
Walter
On Jan 13, 2011, at 1:27 PM, george wrote:
I’m confused. I don’t have any FLV files. I have QT files which
are uploaded to an online gallery which turns them into flash for
showing on their site or embed code. They also provide links to the
m4v versions stored on their server.
Does it if you download the mp4 file and use that? I think it might be
the mov extension it’s balking at. Joe BIllings wrote something about
this trick last week or the week before that. It also might be limited
to the FLV Player in 5.5, I’m not sure because I haven’t upgraded yet.
Walter
On Jan 13, 2011, at 2:09 PM, george wrote:
BTW, isn’t it FLV Player now, not FLV Action?
Freeway doesn’t allow me to choose a .mov as the FLV file.