{"id":74,"date":"2010-07-04T18:46:16","date_gmt":"2010-07-04T18:46:16","guid":{"rendered":"http:\/\/todepoint.com\/blog\/?p=74"},"modified":"2010-07-04T18:46:16","modified_gmt":"2010-07-04T18:46:16","slug":"the-ultimate-video-player-as3","status":"publish","type":"post","link":"https:\/\/todepoint.com\/blog\/2010\/07\/04\/the-ultimate-video-player-as3\/","title":{"rendered":"The ultimate video player &#8211; as3"},"content":{"rendered":"<p>There are many video players in flash out there, lots of them are open too, I&#8217;ve found few tutorials out there giving everything you need to know to code a video player. few of them work really nice and heavily distributed (<a href=\"http:\/\/www.longtailvideo.com\/\">JW Player<\/a>), others have cool UI, few considered proper integration of keyboard control, most of them don&#8217;t. yet none of them has it all. none of the player I saw had the right touch.<\/p>\n<p>So I decided to take the challenge and make a code only (no library assets), lightweight video player, with elegant UI that works as you would expect it to, with keyboard control (starting with play\/pause, forward\/backwards jumps, the fundamentals, the musts). also fullscreen mode and moving between the screen modes by double clicking a la VLC (which is my favorite video player on the Mac), and of-course buffering.<\/p>\n<div id=\"vidcontent\"><img loading=\"lazy\" src=\"http:\/\/www.todepoint.com\/adi\/as_examples\/videoplayer\/vidplace.jpg\" border=\"0\" alt=\"\" width=\"450\" height=\"254\" \/><\/div>\n<p><script type=\"text\/javascript\">\n\/\/ <![CDATA[\nvar glssovid = new SWFObject(\"http:\/\/www.todepoint.com\/adi\/as_examples\/videoplayer\/ultimateplayer.swf\", \"vidtester\", \"450\", \"255\", \"9\", \"#ffffff\");\nglssovid.addParam(\"flashVars\", \"file=http:\/\/www.todepoint.com\/adi\/as_examples\/videoplayer\/widescreenvideoplayback.flv\"); glssovid.addParam(\"allowFullscreen\", \"true\");\nglssovid.write(\"vidcontent\");\n\/\/ ]]>\n<\/script><\/p>\n<p>At the moment the features are:<br \/> \u2022 Keyboard control: play\/pause (space bar); jump backwards\/forward (left\/right);<br \/> \u2022 Volume control affecting the volume while pressing and moving cursor;<br \/> \u2022 Fullscreen-normal by double-clicking the video or dedicated button;<br \/> \u2022 Single click on the video toggles play\/pause;<br \/> \u2022 Display of position and total duration;<br \/> \u2022 Clickable progress bar, a click will jump video to position.<br \/> \u2022 Control bar will hide when mouse leaves stage.<br \/> \u2022 File size is 20.8k (!!)<\/p>\n<p>Credits:<br \/> The architecture was inspired by <a href=\"http:\/\/mrdoob.com\">Mr.doob&#8217;s<\/a> player, but I replaced his video controller with the excellent FLVPlayer by <a href=\"http:\/\/blog.martinlegris.com\">Martin Legris<\/a>, and added my own touch and flavor :)<\/p>\n<p>Suggestions are more than welcome, tell me what you think!<\/p>\n<p><strong>Update:<\/strong> I was working on improving the player behavior across platforms and browsers, discovering that events behavior is different on IE from the ret of the browsers. Surprising ha?   <code>MouseEvent.MOUSE_OUT<\/code> added to the stage is not firing on IE, you have to add <code>Event.MOUSE_LEAVE<\/code>, it still works for the rest of the browsers. This actually solved several oddities on IE, people are still using it?  really?!<\/p>\n<p>\n<strong>Update 2:<\/strong> I added spinning loading animation when video is buffering, and moved the duration text to be next to the position text, I guess it is easier for the eye this way.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are many video players in flash out there, lots of them are open too, I&#8217;ve found few tutorials out there giving everything you need to know to code a video player. few of them work really nice and heavily distributed (JW Player), others have&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,16,28,30],"tags":[],"_links":{"self":[{"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/posts\/74"}],"collection":[{"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":0,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"wp:attachment":[{"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}