Thursday, 19 June 2014

Play Video With HTML5



 Play Video With HTML5 & Notepad

  • open notepad and write the following code
  •     <html>
            <head>
              <title>Playing With HTML5</title>
                         </head>
                <body>
                    <div>Hello, This is my first web app</div>
                    <video id="v1" width="320" height="240" controls="controls" autoplay>
                            <source src="movie.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                    </video>
                </body>
            </html> 

  • Make sure video movie.mp4 is in the same folder where you have saved .html file (for eg. Desktop in my case)
  • Now run the .html file 

Playing Video With HTML5 & Netbeans 8.0 
  • Start Netbeans and create a new web application as demonstrated here
  • Open index.html and replace that content with the one provided above.
  • Make sure you copy your file (movie.mp4) in “Web pages" directory and not in "WEB-INF" directory
  • For running in Chrome simply add “chrome connector” from chrome web store (see image 1.0 for more clarity)
  • For running in Firefox no need to add anything
  • Now that u are all set to run project, just select the project --> right click --> run
  • You will get a working video


  
 Image 1.0

If you are facing any problem drop comments, i will reply as  soon as possible.