Safari and Flash Video

Joined
May 9, 2011
Messages
31
Reaction score
0
Points
6
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
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
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.
 
OP
C
Joined
May 9, 2011
Messages
31
Reaction score
0
Points
6
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
:Smirk:
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
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.
 
OP
C
Joined
May 9, 2011
Messages
31
Reaction score
0
Points
6
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 :Blushing:

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

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
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

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.
 
OP
C
Joined
May 9, 2011
Messages
31
Reaction score
0
Points
6
Thank you sir for all your help.. !! :Cool:

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!
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
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.
 
Joined
Nov 15, 2011
Messages
948
Reaction score
150
Points
43
Location
Toronto
Your Mac's Specs
MBP 16” M1max 32/1tb and bunch of other mac/apple stuff
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.
 
OP
C
Joined
May 9, 2011
Messages
31
Reaction score
0
Points
6
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!!! ;D
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
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.
 
Joined
Nov 15, 2011
Messages
948
Reaction score
150
Points
43
Location
Toronto
Your Mac's Specs
MBP 16” M1max 32/1tb and bunch of other mac/apple stuff
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!!! ;D

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....)
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
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?
 
OP
C
Joined
May 9, 2011
Messages
31
Reaction score
0
Points
6
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 :D

@ 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
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
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.
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
I'm not a MooTools man myself (jQuery and Bootstrap are my libraries of choice) but I haven't seen a simpler way to detect browser and/or OS than the one MT provides. Using that will help pare down that switch/case statement nicely.

Glad we could help! Let us know how it works out for you and if you'd like, I can test it out for you (I use all the browsers and have an iOS and Android device).
 
OP
C
Joined
May 9, 2011
Messages
31
Reaction score
0
Points
6
Great... will let you know how it goes! You 've been extremely helpful and i really appreciate this.. Hopefully someday i will make it up to ya :Cool:
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
Want to pay my tuition? We can call it even then. :p
 
OP
C
Joined
May 9, 2011
Messages
31
Reaction score
0
Points
6
Hahah lol! the lottery is on Sunday.. i got a ticket! You never know..if i win i will buy your uni and sort you out.. LOL!! :D
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top