Create a Media Player and Playlist: New on Premium
plus

Create a Media Player and Playlist: New on Premium

Tutorial Details
  • Topic: HTML5, JavaScript, Video
  • Format: Premium Screencast
Download Source Files

With such a prevalent medium like video on the web it may be a matter of time before you need to build a video section with playlist and player. By using JavaScript (in this case the jQuery framework) a flash player and the new HTML5 data attribute you can easily create a playlist that when clicked will load the video into the specified player without refreshing the page.

Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Tags: Premium
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://bit.ly/cLZXGi Julian

    Thanks for the tut. I’ll check it out later.

  • Ledigitale

    Nice one! great tut. keep up the good work coming.

  • Brad

    Excellent tut! Great one for learning from

  • http://newarts.at Drazen Mokic

    Nice but why a flash player?

    • Adam
      Author

      The tutorial shows how to use the latest release of JWPlayer. Which their javascript api allows for html5 which is demonstrated in the tutorial. Cheers!

      • Ralfe

        is not working… i don’t see nothing
        the video is not loading

  • Adam
    Author

    The tutorial walks through using Long Tail Video’s new JWPlayer . Their api for the new player allows for both Flash and html5 which is demonstrated in the video. Something that should have been added to the description.

  • http://inspirationfeed.com inspirationfeed

    Great tut!

  • http://ipersianmusic.com Sam

    Thanks Great tutorial, but

    I used your code in windows(upload with Dreamweaver CS5) with just changing the version of jquerry to 1.6.4 but the media player is not loading.

    please check my url code & give me a hint:)

    cheers

    • Wilfried

      I have exactly the same problem :(

    • Adam

      Sam It has been a while but do you have a link to look at?

    • http://noithatfami.com.vn Noi that fami

      Same problem as you! :(

    • Ralfe Fernandes

      mee to i have the same problem

      • Ralfe

        me too i have the same problem

  • http://thietkenoithat.net Thiet ke noi that

    Um… Nice tut! I will try this! Hope not any problem..

  • uploader

    Anyone found the problem with not loading the player?