Embedding HTML5 Video from smugmug

[jdorseydesign]

I've been trying to make it so a website I manage shows HTML5 video for an embedded smugmug video when using an iPhone or iPad.

Here's the HTML I'm using. I got the link to the video by copying the mp4 download link.

You'll see if they do not have flash, it attempts to use a VIDEO tag.

However, this doesn't load the video on my iPhone 4. It just shows up as a nice black rectangle with no play controls.


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="580" height="322" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="flashVars" value="s=ZT0xJmk9OTA0MDkzNjUwJms9eWRtZHAmYT0xMjU4NzQ3OV9q N1g1MiZ1PWpkb3JzZXlkZXNpZ24mc2U9MCZzbz0wJmhkYj0xJn NiPTAmZnM9MSZsPTAm" /><param name="src" value="http://cdn.smugmug.com/ria/ShizVidz-2010012201.swf" /><param name="flashvars" value="s=ZT0xJmk9OTA0MDkzNjUwJms9eWRtZHAmYT0xMjU4NzQ3OV9q N1g1MiZ1PWpkb3JzZXlkZXNpZ24mc2U9MCZzbz0wJmhkYj0xJn NiPTAmZnM9MSZsPTAm" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="580" height="322" src="http://cdn.smugmug.com/ria/ShizVidz-2010012201.swf" flashvars="s=ZT0xJmk9OTA0MDkzNjUwJms9eWRtZHAmYT0xMjU4NzQ3OV9q N1g1MiZ1PWpkb3JzZXlkZXNpZ24mc2U9MCZzbz0wJmhkYj0xJn NiPTAmZnM9MSZsPTAm" allowfullscreen="true"></embed>
<video autoplay="true" controls="true" height="322" width="580">
<source src="http://jdorseydesign.com/photos/904093650_ydmdp-640D.mp4" type="video/mp4"></source>
</video>
</object>

[Shima]

Did you ever figure out how to make this work?

[nigelbb]

We really shouldn't need to figure this out. If the embedded player for YouTube & Vimeo can figure out that the user has an iPad & play the appropriate video then it wouldn't be too hard to add this facility to the SmugMug player. Sadly there appears to be no interest in providing this.

[Squeezer]

Its something that needs to be looked at as you lose a lot of viewers who dont have flash enabled devices

[nigelbb]

I posted a proposal for SmugMug to support HTML5 for the embedded player on the feedback forum a couple of months ago but it's only got 14 votes so far http://feedback.smugmug.com/forums/17723-smugmug/suggestions/1269605-support-ipad-etc-with-embedded-video-player?ref=title

[nigelbb]

Still no word on this?

Don't SmugMug & their users care that nobody using a shiny new iPad 2 can view their embedded videos like they can if the videos are hosted at Vimeo or You Tube?

[cohoto]

Here's how I am doing it. I think if flash isn't installed on the browser it will try to use the HTML5 video tag and if the browser doesn't support it I display the image of the video and a link to the video in my gallery. Hope it helps!

I first grab the DVD embed code, then copy the Owner Save link to the mp4 file, lastly, grab the Blog-Medium embedded image. The image embed code is used in the text between the video tags and the direct link to the image is used as the poster for the html5 video. The mp4 link gets used as the source for the video.

<object width="640" height="360" ><param name="movie" value="http://cdn.smugmug.com/ria/ShizVidz-2011030702.swf" /><param name="allowFullScreen" value="true" /><param name="flashVars" value="s=ZT0xJmk9MTIzODAxNDgyMyZrPUdyWmpyJmE9OTAwNzQyNF9M akRSbiZ1PWNvaG90bw==" /><embed src="http://cdn.smugmug.com/ria/ShizVidz-2011030702.swf" flashVars="s=ZT0xJmk9MTIzODAxNDgyMyZrPUdyWmpyJmE9OTAwNzQyNF9M akRSbiZ1PWNvaG90bw==" width="640" height="360" type="application/x-shockwave-flash" allowFullScreen="true"></embed><noflash><video src="http://galleries.cohoto.com/Family/Norah/Norah-Videos/3-20-11/1238014823_GrZjr-1280D.mp4" controls="controls" width="640" height="360" poster="http://galleries.cohoto.com/Family/Norah/Norah-Videos/3-20-11/1238014823_GrZjr-M.jpg">
<p style="text-align:center"><a href="http://galleries.cohoto.com/Family/Norah/Norah-Videos/9007424_LjDRn#1238014823_GrZjr-A-LB" title="March 20, 2011"><img src="http://galleries.cohoto.com/Family/Norah/Norah-Videos/3-20-11/1238014823_GrZjr-M.jpg" title="March 20, 2011" alt="March 20, 2011"></a></p>
</video></noflash></object>

Example in use see here (http://norah.in/2011/04/07/playtime-with-colin/)

[nigelbb]

Well done!

It is actually quite straightforward to do but a bit fiddly doing it by hand with an editor & potentially prone to introducing errors. Why cannot SmugMug fix their player code so that this is done automatically just like the embedded player from Vimeo & You Tube?

[devbobo]

Try this instead...

<iframe width="640" height="360" frameborder="0" src="http://api.smugmug.com/services/embed/1238014823_GrZjr"></iframe>


<iframe width="640" height="360" frameborder="0" src="http://api.smugmug.com/services/embed/1238014823_GrZjr"></iframe>

[nigelbb]

Try this instead...

<iframe width="640" height="360" frameborder="0" src="http://api.smugmug.com/services/embed/1238014823_GrZjr"></iframe>


<iframe width="640" height="360" frameborder="0" src="http://api.smugmug.com/services/embed/1238014823_GrZjr"></iframe>
There are two problems with this approach. Firstly there is no preview image so on the iPad all that you see is a black box with a play button. Secondly in the regular browser that supports Flash the scroll bars of the iframe are really ugly & you do not have the whole video visible.

I still don't understand why SmugMug either can't or won't provide us with the code that allows video to be embedded & viewed both on iPads & Flash enabled browsers completely transparently. Look at how neatly the Vimeo player does it http://www.chrismagold.com/

[devbobo]

There are two problems with this approach. Firstly there is no preview image so on the iPad all that you see is a black box with a play button. Secondly in the regular browser that supports Flash the scroll bars of the iframe are really ugly & you do not have the whole video visible.

I still don't understand why SmugMug either can't or won't provide us with the code that allows video to be embedded & viewed both on iPads & Flash enabled browsers completely transparently. Look at how neatly the Vimeo player does it http://www.chrismagold.com/

Did you even try it on an iPad ? Otherwise, you would have seen that there is a preview image.

[nigelbb]

Did you even try it on an iPad ? Otherwise, you would have seen that there is a preview image.of course I did else why would I tell you that there is no preview image? I bought this iPad 2 yesterday & am using it to write this reply. There is no preview image in your posting nor in my quoting of your post.

[nigelbb]

Did you even try it on an iPad ? Otherwise, you would have seen that there is a preview image.

of course I did else why would I tell you that there is no preview image? I bought this iPad 2 yesterday & am using it to write this reply. There is no preview image in your posting nor in my quoting of your post.I just noticed an odd thing when I display this thread in Safari on my iPhone 4 that initially I get the same issue that there is no preview image just a black box with a Play button. Then after the page has loaded about 10 seconds later the preview image appears. It still does not appear on the iPad though.

[level4]

David,

Thanks for the info. Been trying to figure out how to do html embedding for awhile. I'm still having trouble getting it to work. Could you please clarify a couple of things for us?:

1. If we use your code below, how can we find the correct src= URL to use for our particular videos?
2. Is your code example the only embedding code we need, or do we need to add it to the standard embed code that we get from the Share section of the SM site?

Thanks in advance for your help.

Try this instead...

<iframe width="640" height="360" frameborder="0" src="http://api.smugmug.com/services/embed/1238014823_GrZjr"></iframe>


<iframe width="640" height="360" frameborder="0" src="http://api.smugmug.com/services/embed/1238014823_GrZjr"></iframe>

[devbobo]

1. If we use your code below, how can we find the correct src= URL to use for our particular videos?

The url for the embed file should be http://api.smugmug.com/services/embed/[ImageID]_[ImageKey]. You can typically grab this from the gallery url after the #.


2. Is your code example the only embedding code we need, or do we need to add it to the standard embed code that we get from the Share section of the SM site?
This new format should become the default for video embeds on our share page soon.

Cheers,

David

[nigelbb]

Well, what do you know? The preview images show up on my iPad this morning. Perhaps there was a glitch at SmugMug when I tried it previously.

So this method using iframes works nicely on the iDevices but it still looks ugly on regular browsers that use Flash as it has scroll bars & there does not appear to be any way to see the whole video.

[devbobo]

Well, what do you know? The preview images show up on my iPad this morning. Perhaps there was a glitch at SmugMug when I tried it previously.

So this method using iframes works nicely on the iDevices but it still looks ugly on regular browsers that use Flash as it has scroll bars & there does not appear to be any way to see the whole video.

Which browser/s are scrollbars appearing on ? It's working fine for me with Safari and Chrome on Mac, there appears to be an issue with Firefox.

Does this version work any better ?

<iframe width="640" height="360" frameborder="0" src="http://api.smugmug.com/services/embed/1238014823_GrZjr?width=640&height=360"></iframe>

[devbobo]

ok, so I reproduced the issue on IE. If I provide the width and height parameters in the src url for the iframe (like above), it works fine for both firefox and IE. It seems that there is a bug in my auto-detection code when those parameters aren't provided. I'll dig in and find the issue.

Cheers,

David

[nigelbb]

Excellent! Thank you very much that works fine now. I had noted that it looked OK in Safari on the Mac but assumed that it was because like the iPad it was using HTML5 rather than the Flash Player.

Now when will SmugMug incorporate this simple change into the code for an embedded link rather than users having to figure it out & roll their own?

[devbobo]

Excellent! Thank you very much that works fine now. I had noted that it looked OK in Safari on the Mac but assumed that it was because like the iPad it was using HTML5 rather than the Flash Player.

Now when will SmugMug incorporate this simple change into the code for an embedded link rather than users having to figure it out & roll their own?

the changes are currently in testing, but I'm not sure if it will make this week's release.

[nigelbb]

the changes are currently in testing, but I'm not sure if it will make this week's release.I first requested this last December (http://www.dgrin.com/showthread.php?t=184932) so another week or two is neither here no there. I am just happy to know that I can finally start using SmugMug embedded video on my websites again instead of using Vimeo for hosting my videos.

Now all we need is a player that is as slick & customisable as the Vimeo one:-)

[devbobo]

the changes are currently in testing, but I'm not sure if it will make this week's release.
these changes are now live :thumb

[nigelbb]

these changes are now live :thumbGreat! Thanks for letting us know.

Just tried it out & it works nicely.

[level4]

the changes are currently in testing, but I'm not sure if it will make this week's release.

Thanks. Looks great in Safari and iphone, but is still looks buggy for me in Firefox and Explorer. The video comes up with scrollbars. Anyone else seeing something similar?

[Sheaf]

Thanks. Looks great in Safari and iphone, but is still looks buggy for me in Firefox and Explorer. The video comes up with scrollbars. Anyone else seeing something similar?

Sorry about that. I was able to reproduce and we have a fix currently in testing.

[Sheaf]

Thanks. Looks great in Safari and iphone, but is still looks buggy for me in Firefox and Explorer. The video comes up with scrollbars. Anyone else seeing something similar?

This should be fixed.

[shaunco]

The scrollbars are gone in IE8, but they are back in IE9 (in both compatibility mode and normal mode).

Also, when I use Firefox 3.6.11 (on Windows), the iframe contents refresh hundreds of times, adding "&height=&width=" without any values to the iframe.src URL until the iframe.src exceeds the maximum - and the Firefox displays an "Invalid Request" error in the iframe... It seems like the auto-detection code is getting null values back for both height and width, so it changes the url and then tries again with the exact same results.

As an additional request, would it be possible to add URL parameter options for stretch and HD - so I can do something like:
http://api.smugmug.com/services/embed/[vidid]_[vidkey]?width=608&height=342&stretch=on&hd=on

[sbanawan]

I must be an idiot because I can't for the life of me get it working properly. What gives? I copy the embed link, paste into my blog. It works fine on the desktop but it will not show up on my iPhone. I get the ugly "Flash required" black box instead. I'm very annoyed at this (note: I'm technically savvy so this is doubly frustrating).

[rainforest1155]

I must be an idiot because I can't for the life of me get it working properly. What gives? I copy the embed link, paste into my blog. It works fine on the desktop but it will not show up on my iPhone. I get the ugly "Flash required" black box instead. I'm very annoyed at this (note: I'm technically savvy so this is doubly frustrating).
What specific code did you embed?
Post a link to the video in your gallery and a link to your blog where you embedded it so we could take a look.
If you don't want to post that in a public forum, contact us at our helpdesk:
http://help.smugmug.com/

[terribleprocess]

I’m looking for video window (approx. 25%) within my home page that already has a stretchy slide show. Anyone know the code to add a video (preferably a loop) component within an existing slide show? Or, on the other hand, back to the starting board, the code to accomplish both tasks at once?<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
Thanks for your assistance,
terribleprocess<o:p></o:p>

[terribleprocess]

I’m looking for video window (approx. 25%) within my home page that already has a stretchy slide show. Anyone know the code to add a video loop component within an existing slide show? Or, on the other hand, back to the starting board, the code to accomplish both tasks at once?<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
Thanks<o:p></o:p>