New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

Safari and Flash Video


Post Reply New Thread Subscribe

 
Thread Tools
Creativedot

 
Member Since: May 09, 2011
Posts: 31
Creativedot is on a distinguished road

Creativedot is offline
Hello..

i am building a site where it has lots of video on it and i need it to work on all browsers.

I found that browsers need different video containers to work... Safari needs HTML5 , Firefox and Chrome need Flash.

Here is the code i am using :


Code:
// Player support options
define('PLAYER_FLASH',         0);
define('PLAYER_HTML5',         1);
define('PLAYER_HTML5FALLBACK', 2);
define('PLAYER_UNSUPPORTED',   3);
		
// Returns a supported video player type for the user's browser
// Recognized extensions are: flv f4v mp4 m4v ogv webm
function getSupportedPlayerType($ext, $browser)
{
	if ($ext === 'flv' || $ext === 'f4v')
		return PLAYER_FLASH;
	else
	{
		switch($browser)
		{
			case 'firefox':
			case 'opera':				
				if ($ext === 'webm' || $ext === 'ogv')
					return PLAYER_HTML5;
				else if ($ext === 'mp4' || $ext === 'm4v')
					return PLAYER_FLASH;
				else
					return PLAYER_HTML5FALLBACK;
				break;
				
			case 'ie9plus':
			case 'safari':
				if ($ext === 'mp4' || $ext === 'm4v' || $ext === 'mov')
					return PLAYER_FLASH;
				else if ($ext === 'webm' || $ext === 'ogv')
					return PLAYER_UNSUPPORTED;
				else
					return PLAYER_HTML5FALLBACK;
				break;
				
			case 'chrome':
				return PLAYER_FLASH;
				break;
				
			case 'ipad':
				if ($ext === 'ogv' || $ext === 'webm')
					return PLAYER_UNSUPPORTED;
				else
					return PLAYER_HTML5;
				break;
			
			// Ancient IE only supports Flash
			case 'ie':
			default:
				if ($ext === 'webm' || $ext === 'ogv')
					return PLAYER_UNSUPPORTED;
				else
					return PLAYER_FLASH;
				break;
		}
	}
	
	return PLAYER_UNSUPPORTED;
}

The weird and annoying thing is that HTML5 in safari is not loading as fast as Flash and sometimes it just doesnt play at all... So i decided to use Flash ...everything seemed ok...i tested it on windows and OS different machines etc etc,...until a friend the other day told me that he couldnt view the video at all

Is Flash really unstable for safari? Whats the solution to this?

Many Thanks for reading this
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
Flash is unstable everywhere.

Your mixing up some terminology here. HTML5 video works in all the browsers, as does Flash. However, whereas Flash works across all browsers without change, each browser supports different video formats in their HTML5 video support. Therefore, Safari doesn't need HTML5 and the others don't need Flash. If you encode your videos as H.264 and WebM, you can get all the major browsers (Safari, Chrome, Firefox and Opera). Take a look here to see how you can supports all browsers with the HTML5 video tag. Doing this will remove the need to use Flash which is better for everyone.

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks
Creativedot

 
Member Since: May 09, 2011
Posts: 31
Creativedot is on a distinguished road

Creativedot is offline
Hello vansmith and thanks for your answer..

I already use mp4 for safari... and it doesnt work on certain Macs apparently...and safari only accepts MP4..

Thats why i changed it to Flash. What could possibly cause the problem?

Many Thanks for your time
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
If you're only going to use Flash, you don't need the elaborate case statement to detect the browser - just load the Flash player and move on. However, doing that excludes iOS users since Flash doesn't work there. Thus, the case statement might be of use but only to detect iOS and non-iOS users.

This is why you'd be better off encoding videos as H.264 & WebM and write a video tag with multiple source inputs (taken from the w3schools page linked to earlier):
Code:
<video width="320" height="240" controls="controls">
   <source src="movie.mp4" type="video/mp4" />
   <source src="movie.webm" type="video/webm" />
   Your browser does not support the video tag.
 </video>
In that case, the mp4 version will be served up and if that fails, the WebM version will be served. Between the two, you'll get 99.9% of web users.

MPEG-4 will work on OS X - support is built in through QT. I can't explain why it doesn't work for the one user - that's admittedly a mystery to me.

As for the code itself, any reason you're using three equal signs? As far as I know, one equal sign is used for assignment and two is used for equality. I could be wrong - I'm a bit of a JS newbie.

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks
Creativedot

 
Member Since: May 09, 2011
Posts: 31
Creativedot is on a distinguished road

Creativedot is offline
Thanks again for your help

I am learning my self, im no expert on code.. I just used tutorials and templates to put it together. 3 equals is the identical comparison operator, it checks if two variables have the same value AND if their types are the same....So i though it would be safer to use that.

I am looking into a way to convert my video to webM... Any good converters out there?

After i convert i will try to use the solution you mentioned ....it seems logical and it should work..hopefully i i will get it right

I just switched from a flash developer to a web developer 3-4 months ago.. i got a long way to go .. lol!
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
Quote:
Originally Posted by Creativedot View Post
I am learning my self, im no expert on code.. I just used tutorials and templates to put it together. 3 equals is the identical comparison operator, it checks if two variables have the same value AND if their types are the same....So i though it would be safer to use that.
I didn't know that so thanks! As for whether or not that's better, I'll have to leave that question for someone more proficient in Javascript

Quote:
Originally Posted by Creativedot View Post
I am looking into a way to convert my video to webM... Any good converters out there?
Miro Video Converter is pretty no nonsense. If you don't need to modify any properties of the video, it's likely the easiest solution.

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks
Creativedot

 
Member Since: May 09, 2011
Posts: 31
Creativedot is on a distinguished road

Creativedot is offline
Thank you sir for all your help.. !!

I been looking for something like this (Miro Video Converter) all day!!!
Will let you know how it goes..once i figure out something stable.

Thanks a million!
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
No worries. If the page is done and online, post the URL here and I'll take a look if you're still having issues.

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks
Groovetube

 
Groovetube's Avatar
 
Member Since: Nov 15, 2011
Location: Toronto
Posts: 290
Groovetube has a spectacular aura about
Mac Specs: Retina MBP 2.7 768ssd/16gig ram /30" dell 3008. and bunch of other mac/apple stuff

Groovetube is offline
If you are just playing straight video and don't need the capabilities of flash video, save yourself the trouble, and use the video tag and bypass flash.

If you do want to use flash video and serve html5 video, do yourself a favor and use swfObject to load the flash. And inside the div tag that the swfObject rewrites if the user has flash, place the video tag for html5 (serve both MP4, and webm). (you can get swfObject from google code). If they don't have flash (ie bowsers with no plugin and iOS etc), the flash will not be written in, and the video tags will work.

That will solve everything. If the user has flash, they'll see it. If they don't, they'll get the html5 video.

Seamless, and simple.
QUOTE Thanks
Creativedot

 
Member Since: May 09, 2011
Posts: 31
Creativedot is on a distinguished road

Creativedot is offline
Hello Groovetube... thanks for your asnwer...

I managed to get the video to play HTML5 only on safari and Ie9+ it works ok..

Now i bumped into another issue which is background video not scaling to be 100% width and height. Flash video scales ,... but HTML5 on safari doesnt...

Thats another issue though...i will do a bit more research and see how to fix this!!

Thanks for your answer friend!!!
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
If you're talking about fullscreen video, yes, this is a limitation of delivering video through HTML. The best you can get is "full browser" (I don't know what else to call it) where the video is expanded to fit the browser window. You can see an example of that here or if you're part of the YouTube HTML5 beta.

Thus, if you want full screen video, you have to go Flash.

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks
Groovetube

 
Groovetube's Avatar
 
Member Since: Nov 15, 2011
Location: Toronto
Posts: 290
Groovetube has a spectacular aura about
Mac Specs: Retina MBP 2.7 768ssd/16gig ram /30" dell 3008. and bunch of other mac/apple stuff

Groovetube is offline
Quote:
Originally Posted by Creativedot View Post
Hello Groovetube... thanks for your asnwer...

I managed to get the video to play HTML5 only on safari and Ie9+ it works ok..

Now i bumped into another issue which is background video not scaling to be 100% width and height. Flash video scales ,... but HTML5 on safari doesnt...

Thats another issue though...i will do a bit more research and see how to fix this!!

Thanks for your answer friend!!!
no problem! The suggestion I gave is precisely the one I use. swfObject is brilliant for ensuring iOS compatibility if flash is truly needed. I have been an advanced flash developer, though I focus mainly on wordpress css, interactive stuff, I go by using flash ONLY when really necessary. Adobe is smartly converting their focus on js outputs etc.

I haven't done fullscreen html5 video, probably because it's either not possible or it's a pain. I have seen though some workarounds out there involving 100% images and poster images and z-indexes.

These days if I do straight video, the only reason for flash is to support pre html5 browsers (I'm lookin at you IE....)
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
Quote:
Originally Posted by Groovetube View Post
These days if I do straight video, the only reason for flash is to support pre html5 browsers (I'm lookin at you IE....)
As much as IE9 was a marked improvement, it still lags. Here's hoping IE10 pushes the boundaries a little further.

What I find frustrating about those results is Opera's performance on mobile devices - why does the mobile version support more of the spec than the desktop version?

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks
Creativedot

 
Member Since: May 09, 2011
Posts: 31
Creativedot is on a distinguished road

Creativedot is offline
Hi vansmith... Unfortunately the plan was to have full screen background video on some occasions.. and i will have to stick with that.. Maybe i will have to go for Flash player after all...

I found this interesting template ...that actually has HTML5 video as full screen background..

http://www.renklibeyaz.com/thiswayhtml/index_dark.html

Similar to what i am trying to do

@ Groovetube I get what you say ..its a very slow process thats happening right now on the web.. (Changing to HTML5 instead of flash) I do think that HTML5 is much better and stable.. but we might have jumped on the HTML5 wagon too soon.. I think IE 10 is looking very promising ,

check out this cool link ,, IE10 test drive

Internet Explorer 10 Test Drive
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
Yeah, as I noted, if you want true fullscreen, you need to stick to Flash for now. If you're okay with the video only taking up the width and height of the browser, you can stick to HTML5.

It sounds like you might be better off sticking with Flash. If you do, you can simplify that case statement by simply looking for mobile browsers. You could do something like the following: if mobile, load flash else load HTML5 (you like that terrible pseudocode?). And, to make things even simpler, I believe that the stock Android browser support H.264 so you may only have to make that version available (I don't know for sure so I'll have to get back to you about this).

You may also want to look into MooTools if you haven't already since they have functions that allow you to easily detect browser and OS. As an example:
Code:
if (Browser.Platform.ios){
    alert("You're using iOS!");
}
I don't know how you're getting browsers and OSes but if it's complex in the slightest, you might want to look at MooTools.

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks

Post Reply New Thread Subscribe


« Google map on web page | e-commerce web hosting »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
Click To Flash for Safari Confuses nbc.com Video Player MYmacROX OS X - Apps and Games 0 02-23-2012 05:19 PM
OS X Lion Bug: Safari guzzling massive amounts of RAM OneMoreThing... Apple Rumors and Reports 33 08-01-2011 11:07 PM
Flash 10.1 Not Working in Safari 5 drumkey87 OS X - Apps and Games 1 01-20-2011 01:07 AM
Snow Leopard, Flash, Safari, New Account ProfessorZ OS X - Operating System 6 11-30-2009 05:14 PM
Flash video streaming - Settings menu problem. footynutguy Movies and Video 0 10-19-2009 03:47 PM

All times are GMT -4. The time now is 02:47 AM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?