HTML5 MP3 Player Manual                                                                                                   ...
HTML5 MP3 Player Manual                                                                                                 DM...
HTML5 MP3 Player Manual                                                                                                   ...
HTML5 MP3 Player Manual                                                                                        DMXzone.com...
HTML5 MP3 Player Manual                                                                                       DMXzone.com...
HTML5 MP3 Player Manual                                                                                          DMXzone.c...
HTML5 MP3 Player Manual                                                                                         DMXzone.co...
HTML5 MP3 Player Manual                                                                                        DMXzone.com...
HTML5 MP3 Player Manual                                                                                        DMXzone.com...
HTML5 MP3 Player Manual                                                                                               DMXz...
HTML5 MP3 Player Manual                                                                                            DMXzone...
HTML5 MP3 Player Manual                                                                                             DMXzon...
HTML5 MP3 Player Manual                                                                                                DMX...
HTML5 MP3 Player Manual                                                                                                DMX...
HTML5 MP3 Player Manual                                                                                             DMXzon...
HTML5 MP3 Player Manual                                                                                           DMXzone....
HTML5 MP3 Player Manual                                                                                                DMX...
HTML5 MP3 Player Manual                                                              DMXzone.com     For each video you ca...
HTML5 MP3 Player Manual                                                                                             DMXzon...
HTML5 MP3 Player Manual                                                                                  DMXzone.como   We...
HTML5 MP3 Player Manual                                                                                  DMXzone.como   OG...
HTML5 MP3 Player Manual                                                              DMXzone.comCopyright © 2011 DMXzone.c...
HTML5 MP3 Player Manual                                                                                           DMXzone....
HTML5 MP3 Player Manual                                                                                                 DM...
HTML5 MP3 Player Manual                                                                                              DMXzo...
HTML5 MP3 Player Manual                                                                                          DMXzone.c...
HTML5 MP3 Player Manual                                                                                           DMXzone....
HTML5 MP3 Player Manual                                                                                            DMXzone...
HTML5 MP3 Player Manual                                                                                              DMXzo...
HTML5 MP3 Player Manual                                                                                           DMXzone....
HTML5 MP3 Player Manual                                                                                             DMXzon...
HTML5 MP3 Player Manual                                                                                           DMXzone....
HTML5 MP3 Player Manual                                                                                          DMXzone.c...
HTML5 MP3 Player Manual                                                                                  DMXzone.comRefere...
HTML5 MP3 Player Manual                                                                                 DMXzone.comReferen...
HTML5 MP3 Player Manual                                                                                  DMXzone.comMinimu...
HTML5 MP3 Player Manual                                                                                        DMXzone.com...
Upcoming SlideShare
Loading in …5
×

Html5 videoplayer 1

392 views
327 views

Published on

guide test

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
392
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 videoplayer 1

  1. 1. HTML5 MP3 Player Manual DMXzone.comTable of contentsTable of contents..................................................................................................................................................................... 1About HTML5 Video Player .................................................................................................................................................... 2Features in Detail ..................................................................................................................................................................... 3The Basics: Basic HTML5 Video Player with a Predefined Design ................................................................................. 14Advanced: YouTube and Vid.ly as Video Sources for HTML5 Video Player .............................................................. 24Reference: Compatibility Chart ......................................................................................................................................... 34Reference: Skins ..................................................................................................................................................................... 35Video: Basic HTML5 Video Player with a Predefined Design ........................................................................................ 37Video: Using Custom Controls with HTML5 Video Player . ............................................................................................. 37Video: Using YouTube and Vid.ly as Video Sources ....................................................................................................... 37 Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 1 of 37
  2. 2. HTML5 MP3 Player Manual DMXzone.com About HTML5 Video Player Meet the present and future of HTML5 Video - the HTML5 Video Player Dreamweaver extension! DMXzone’s plug-in free, easy to use and fast video player is ready to shows off the potential of HTML5 internet revolution. With a full browser compatibility and special support for iPad/iPhone it’s a great tool in creating stunning pages. Packed with four amazing skins, fullscreen option and built-in support for Vid.ly encoding and YouTube it marks the beginning of a new era in Webdesign. Of course, for the easiest implementing on a website, there’s a super simple Dreamweaver UI to leadyou through the process. Based on jQuery and the great open source video player Projekktor, the HTML5Video Player guaranties a fully compliant HTML5 video in all browsers. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 2 of 37
  3. 3. HTML5 MP3 Player Manual DMXzone.comFeatures in Detail  Support for all HTML5 Video formats needed for the different browsers - In order to play your HTML5 Videos on every browser, device or even consoles, you can use Miro Video Converter(OGG+WebM), the still beta service Vid.ly(all formats) or HandBreak (MP4)to convert your videos.  Built-in support for Vid.ly - This service is still in beta test but it allows you to point your video and get a unique link that supports any browser, device and console. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 3 of 37
  4. 4. HTML5 MP3 Player Manual DMXzone.com Choose from the many included HTML5 Video Player skins - All made in regular CSS so you can edit or create your own. Playlist support - You can add as many videos as you want in a playlist and the prev/next button automatically appear on the video player skin. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 4 of 37
  5. 5. HTML5 MP3 Player Manual DMXzone.com Video URL from a Dreamweaver database/recordset - You can choose file from a database/recordset. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 5 of 37
  6. 6. HTML5 MP3 Player Manual DMXzone.com  General Poster - We’ve added a default poster that is visible before the video starts. Allow Fullscreen - the videos can be previewed on fullscreen. Auto Play - The video can load automatically once the website is open. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 6 of 37
  7. 7. HTML5 MP3 Player Manual DMXzone.com Loop - The loop offers you an endless repeat of the video playlist. Controls - Easy to navigate controls to stop, pause, mute, control the volume, play next and previous. Enable Keyboard - By enabling it you can also navigate the video with your keyboard. Auto Next - The player loads automatically the next movie in your playlist. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 7 of 37
  8. 8. HTML5 MP3 Player Manual DMXzone.com Works great on iPad and iPhone - The HTML5 Video Player uses the native HTML5 video control and works great on iPad and iPhone! Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 8 of 37
  9. 9. HTML5 MP3 Player Manual DMXzone.com Flash Fallback - Thanks to the DMXzone clever use of feature detection and fall back you can preview it even on ancient browsers. Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you’ll need. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 9 of 37
  10. 10. HTML5 MP3 Player Manual DMXzone.com  An inline property inspector - The property inspector enables you to change several options after you’ve created the video player. Fully Controllable by behaviors - You want to navigate to specific position, start or stop the Video Player - it can be easily done with the Control HTML5 Video Player behavior. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 10 of 37
  11. 11. HTML5 MP3 Player Manual DMXzone.com Full Support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions like DMXzone Lightbox, Sliding Panels and Sliding Bilboard to your Video Player. Search Engine Friendly - HTML5 Video Player is made in just HTML5, CSS and jQuery. It can be nicely indexed by all search engines and web spiders. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 11 of 37
  12. 12. HTML5 MP3 Player Manual DMXzone.com Fully cross-browser compatible - Create stunning Video Players even in Internet Explorer thanks to the DMXzone’s clever use of feature detection and fall back. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 12 of 37
  13. 13. HTML5 MP3 Player Manual DMXzone.comBefore you beginMake sure to setup your site in Dreamweaver first before creating a page. If you don’t know how to do thatplease read this.Installing the extensionRead the tutorial at http://www.dmxzone.com/go?4671Login, download the product, and look up your serial at http://www.dmxzone.com/myZone/purchasesGet the latest extension manager from Adobe athttp://www.adobe.com/exchange/em_download/Open the .mxp file (the extension manager should start-up) and install the extension.If you experience any problems contact our Live Support! Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 13 of 37
  14. 14. HTML5 MP3 Player Manual DMXzone.comThe Basics: Basic HTML5 Video Player with a Predefined DesignIn this tutorial we will show you how to insert HTML5 Video Player on your page using one of the predefineddesigns*You can also check out the video. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 14 of 37
  15. 15. HTML5 MP3 Player Manual DMXzone.comHow to do it 1. First, we’ve created a simple page and now we’re going to insert the HTML5 Video Player from the HTML5 Video Player menu. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 15 of 37
  16. 16. HTML5 MP3 Player Manual DMXzone.com2. For our HTML5 Video Player we’ll use the Maccao skin, which is one of the predefined designs in the extension. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 16 of 37
  17. 17. HTML5 MP3 Player Manual DMXzone.com3. We’ll import a single video for this tutorial, but you can always import a whole folder. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 17 of 37
  18. 18. HTML5 MP3 Player Manual DMXzone.com For each video you can add a title.Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 18 of 37
  19. 19. HTML5 MP3 Player Manual DMXzone.com4. You need 3 versions of your video in order to play it in every browser, even on ancient ones. After encoding it, browse the file and place in the field. o MPEG 4 format - We used HandBreak video converter with Universal preset and Web optimized option checked. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 19 of 37
  20. 20. HTML5 MP3 Player Manual DMXzone.como WebM format - Miro Video Converter Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 20 of 37
  21. 21. HTML5 MP3 Player Manual DMXzone.como OGG format - Miro Video Converter Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 21 of 37
  22. 22. HTML5 MP3 Player Manual DMXzone.comCopyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 22 of 37
  23. 23. HTML5 MP3 Player Manual DMXzone.com5. When you’re done, click the OK button.6. Later on, you can change your settings quickly from the property inspector. Now, you can preview your video in a browser. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 23 of 37
  24. 24. HTML5 MP3 Player Manual DMXzone.comAdvanced: YouTube and Vid.ly as Video Sources for HTML5 VideoPlayerIn this tutorial we will show you how to use YouTube and Vid.ly as video sources for the HTML5 Video Player.*You can also check out the video. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 24 of 37
  25. 25. HTML5 MP3 Player Manual DMXzone.comHow to do it 1. Open the HTML5 Video Player UI and customize your player. You can set the size, volume, design, poster and many more options. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 25 of 37
  26. 26. HTML5 MP3 Player Manual DMXzone.com2. Click on the Add new button in order to add a video from YouTube. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 26 of 37
  27. 27. HTML5 MP3 Player Manual DMXzone.com3. Go to your browser and copy the video link from the address bar. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 27 of 37
  28. 28. HTML5 MP3 Player Manual DMXzone.com4. Paste the YouTube link in the File name field and click OK. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 28 of 37
  29. 29. HTML5 MP3 Player Manual DMXzone.com5. Here is the video (1) we’ve just added and now we’re going to add a video from Vid.ly (2). o Vid.ly - is still in beta test but it allows you to point your video and get an unique link that supports any browser, device and console: - Vid.ly transcodes and stores the video into over a dozen video formats and sizes - You receive a short url to the video - Once a user visits the URL it automatically detects the device or browser type and delivers the correctly formatted video from a high quality CDN network. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 29 of 37
  30. 30. HTML5 MP3 Player Manual DMXzone.com6. Once Vid.ly encodes your video in all possible formats for browsers, devices and consoles, copy the unique link. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 30 of 37
  31. 31. HTML5 MP3 Player Manual DMXzone.com7. Paste the URL in the File name field. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 31 of 37
  32. 32. HTML5 MP3 Player Manual DMXzone.com8. Note that for the YouTube video and the other one, we’ve converted in Vid.ly we need only one link for each. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 32 of 37
  33. 33. HTML5 MP3 Player Manual DMXzone.com9. When you’re done, click the OK button and preview the videos in your browser. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 33 of 37
  34. 34. HTML5 MP3 Player Manual DMXzone.comReference: Compatibility Chart Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 34 of 37
  35. 35. HTML5 MP3 Player Manual DMXzone.comReference: SkinsApplicious:Maccao: Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 35 of 37
  36. 36. HTML5 MP3 Player Manual DMXzone.comMinimum:Totallylookslike: Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 36 of 37
  37. 37. HTML5 MP3 Player Manual DMXzone.comVideo: Basic HTML5 Video Player with a Predefined Design With this movie we will show you how to insert HTML5 Video Player on your page using one of the predefined designsVideo: Using Custom Controls with HTML5 Video Player With this movie we will show you how to use the control behaviors in order to navigate the HTML5 Video Player with any element on your page.Video: Using YouTube and Vid.ly as Video Sources With this movie we will show you how to use YouTube and Vid.ly as video sources for the HTML5 Video Player. Copyright © 2011 DMXzone.com All Rights Reserved To get more go to DMXzone.com Page 37 of 37

×