Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Safari and Flash Video

    Member Since
    May 09, 2011
    Posts
    31
    Safari and Flash Video
    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

  2. #2
    Safari and Flash Video
    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,398
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

  3. #3
    Safari and Flash Video

    Member Since
    May 09, 2011
    Posts
    31
    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

  4. #4
    Safari and Flash Video
    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,398
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

  5. #5
    Safari and Flash Video

    Member Since
    May 09, 2011
    Posts
    31
    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!

  6. #6
    Safari and Flash Video
    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,398
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

  7. #7
    Safari and Flash Video

    Member Since
    May 09, 2011
    Posts
    31
    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!

  8. #8
    Safari and Flash Video
    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,398
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

  9. #9
    Safari and Flash Video
    Groovetube's Avatar
    Member Since
    Nov 15, 2011
    Location
    Toronto
    Posts
    287
    Specs:
    Retina MBP 2.7 768ssd/16gig ram /30" dell 3008. 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.

  10. #10
    Safari and Flash Video

    Member Since
    May 09, 2011
    Posts
    31
    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!!!

  11. #11
    Safari and Flash Video
    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,398
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

  12. #12
    Safari and Flash Video
    Groovetube's Avatar
    Member Since
    Nov 15, 2011
    Location
    Toronto
    Posts
    287
    Specs:
    Retina MBP 2.7 768ssd/16gig ram /30" dell 3008. and bunch of other mac/apple stuff
    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....)

  13. #13
    Safari and Flash Video
    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,398
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

  14. #14
    Safari and Flash Video

    Member Since
    May 09, 2011
    Posts
    31
    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

  15. #15
    Safari and Flash Video
    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,398
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Click To Flash for Safari Confuses nbc.com Video Player
    By MYmacROX in forum OS X - Apps and Games
    Replies: 0
    Last Post: 02-23-2012, 04:19 PM
  2. Flash 10.1 Not Working in Safari 5
    By drumkey87 in forum OS X - Apps and Games
    Replies: 1
    Last Post: 01-20-2011, 12:07 AM
  3. Safari/Flash problem
    By vhaberkorn in forum OS X - Apps and Games
    Replies: 4
    Last Post: 04-16-2010, 09:05 PM
  4. streamed video makes my computer crash (flash video excluded)
    By reko in forum OS X - Operating System
    Replies: 6
    Last Post: 12-11-2008, 05:39 PM
  5. Flash not working in Safari!
    By CoinSlot in forum OS X - Apps and Games
    Replies: 2
    Last Post: 08-15-2006, 11:04 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •