Today I am going to tell you how can you use your web browser as a video player. No need of any software, just by using HTML 5 video tag you can convert your browser to an amazing video player. You just need to have a HTML5 supporting browser. Latest versions of Firefox and Google Chrome supports HTML5.1. Just drag and drop to play
Open Google Chrome and just drag and drop .mp4 (video) files to play in the browser itself . You can only play .mp4 files, other video formats are not supported. While playing the video you will get many control options like (a) Pause & play (b) Timeline bar (c) Volume control (d) Full Screen option. The same has been shown in the following figure. This technique is working fine in Google Chrome.
2. Use <video> tag to play video
You can play video using HTML5 video tag. I have added a little bit of Javascript code to make it little bit user-friendly. Just copy and paste the following code in a notepad ans save it as .html extension.
<html>
<body>
<script type="text/javascript">
function play1(){
document.getElementById("Video1").src=document.getElementById("theFile").value;
document.getElementById("Video1").load();
document.getElementById("Video1").play();
}
function makeBlank(){
if(document.getElementById("theFile").value=="Enter file path..."){
document.getElementById("theFile").value="";
}
}
function enterPath(){
if(document.getElementById("theFile").value.length==0){
document.getElementById("theFile").value="Enter file path...";
}
}
</script>
<video id="Video1" controls="controls" preload="auto" width="640" height="264">
<source src="D:Example.mp4" type='video/mp4'>
</video>
<br><br>
<input type="text" id="theFile" value="Enter file path..." onclick="makeBlank()" onblur="enterPath()"/>
<input type="button" onclick="play1()" value="Play">
<br><br>
</body>
</html>
Now open the html file and you can see a text box. Just provide the path to .mp4 file and click on Play. If you have a .mp4 file called Example.mp4 in D: drive then you can enter the path D:Example.mp4 and click on Play.
3. Using CSS to make the player more attractive
By using CSS we can convert every HTML page more attractive and more eye catching. In Method 2 I told you how to use <video> tag. Now we will try how to apply CSS to make the video player more attractive. Copy and paste the following code in a Notepad and save it in .html extension.
Important: In the html code you can find a line
<source src=”D:Example.mp4” type=’video/mp4′>
You have to enter your own path in place of the underlined letters. Then save the file and open it. You will see an user interface as following.
<html>
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="D:Example.mp4" type='video/mp4'>
</video>
</body>
</html>
