Play video in html5

**hershv** · Dec 26th, 2010, 04:02 PM

Hey guys, I need some help, I've been scratching my head on this one for a while and still can't seem to accomplish my task. What I am trying to do is make an html5 webpage which can play video. Now I know you must be thinking "oh that is piece of cake, just slap in those <video></video> tags and a couple of src's together and u'll be good". Well no I have accomplished that but now there is a twist. I want to make it be able to the user to upload their own video that is from their hard drive and play the video in my video player (the html5 video player). Here is what I plan on doing, the user clicks on upload and the file path string is then stored in a variable (javascript i think) and then when I press another button which says "play video" it will replace the video src with the string that is stored. I know this can be done because you just directly paste a video link from your computer and can play it. So all I need is how to change the src. Here is the code I have so far.

Code:

<!DOCTYPE>
<html>
<head>
<title>
Player
</title>
<body bgcolor="black">
<script> var video = document.getElementsByTagName( 'video' )[0]; </script>
</head>
<body>
<br>
<br>
<hr size="1" width=80%>
<br> <br>
<center>
<div style="width:800px; background-color: #ffffff;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #000;padding: 10px;" >
<center>
<font face="arial" size="3" color="white">
<input type="file" id="datafile" name="datafile" size="78643200"> <br><br>
<INPUT TYPE="button" id="go" size="5" VALUE="Play Media File" onclick="video.play()">
</font>
</center>
</div>
</center>
<video src="datafile"></video>
</body>
</html>

Thanks alot guys

**Nightwalker83** · Dec 26th, 2010, 06:53 PM

Html doesn't play video but rather acts like a container for the player! The player what plays the video.Which point of view are you doing this from web developer or software developer? The reason I'm asking is because having web development background my answer might be different to someone with a software development background.

Edit:

Here is some code from my website which, I used to display a video.

Code:

     <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="328" height="309" tabindex="15" title="video">
        <param name="movie" value="../media/sh102186.swf" />
        <param name="quality" value="high" />
      </object>
      </noscript>

As you can see the link to the player is included in the code. Hence you need to download and install flash player in order to view the video.

**kows** · Dec 27th, 2010, 12:50 AM

Nightwalker, what you posted is what is used to play Flash videos. He's using HTML5, which has a <video> tag that can be used as a video player.

As for the actual problem, hershv, you would be able to use the onchange event on your file <input> to retrieve the file path, but this approach won't work in every browser. For example, the path returned by Chrome (and potentially Firefox [don't have it installed]) in the code below is a fake path -- (C:/fakepath/filename is the literal path returned). IE8 returns the full, correct file path.

Code:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      window.onload = function(){
        document.getElementById("video").onchange = function(){
          document.getElementById("output").innerHTML = "File: " + this.value;
        };
      }
    </script>
  </head>
  <body>
    <form>
      <input type="file" id="video" />
    </form>
    <span id="output"></span>
  </body>
</html>

Also, your mark-up is a little messed up. Tags must be closed in the same order that they were opened. You close your <head> tag after you open your <body> tag, so your mark-up in general is malformed. On top of that, you can't have a <body> tag inside of a <head> tag, anyway. You can look at the mark-up I've pasted above for a good example of that. Also, all tags should be closed -- whether you have a separate closing tag (</tag>) or a self closing tag (<tag />) does't matter -- but your should be .

**Merri** · Dec 27th, 2010, 04:00 AM

kows: now you're mixing HTML5 with XHTML: in HTML5 you don't need to close the single tag elements explicitly, <img alt="" src=""> and   are perfectly fine

Anyway, the DOCTYPE also has to be pointed out, in the first post it is <!DOCTYPE> while it should be <!DOCTYPE html> to make it "the latest and greatest HTML".

**SambaNeko** · Dec 27th, 2010, 10:11 PM

Not necessary to explicitly close tags in HTML5, but it is syntactically acceptable, and may be desirable in some cases (when you intend to serve your document as HTML or XML).

**Merri** · Dec 28th, 2010, 05:38 AM

I knew they were combining XHTML to HTML (and thus XML syntax would be automatically in XHTML served pages), but this is new. It seems to be they've added this some two years ago or so. Tell me about things getting complicated... so, for any HTML page that is not HTML 4.01 or earlier it is now ok to use self-closing tags.

HTML 5 or later:   and   is ok (for pages served as text/html)
Any XHTML: must be  
HTML 4.01 or earlier: must be  

**SambaNeko** · Dec 29th, 2010, 06:56 PM

HTML5 seems to be simplifying a lot of things, but I wonder if some changes won't cause confusion. <head> and <body> tags are apparently becoming optional, for instance.

I like having XHTML's option of self-closing tags though, as a well-formed document feels more "proper" to me.

**Merri** · Dec 30th, 2010, 12:30 AM

Afaik HEAD and BODY tags have been optional since the introduction of HTML? No time now to check this from a document, but I think it is years already that I checked it against a validator.

**SambaNeko** · Dec 30th, 2010, 03:10 PM

Yeah, looks like they're already optional - my mistake. Guess I've just never seen anyone purposefully omitting them or advocating to do so.

**Nightwalker83** · Jan 4th, 2011, 08:38 PM

This might be of interest!

Thread: Play video in html5

Thread Tools

Display

Play video in html5

Re: Play video in html5

Re: Play video in html5

Re: Play video in html5

Re: Play video in html5

Re: Play video in html5

Re: Play video in html5

Re: Play video in html5

Re: Play video in html5

Re: Play video in html5

Tags for this Thread

Posting Permissions