Display Video in html5 web

Question

I need to play a video in my web page. I used following code for test it. Result display player but won't play the video. I used updated chrome as my web browser.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

<video controls=controls>
    <source src = "q.mp4" type="video/mp4"/> 
</video>

</body>
</html>

Note- my video and the web page is contain in same folder.

I change the source as following

<video width="400" height="300" controls>
       <source src="video.m4v" type="video/mp4">
       <source src="video.webm" type="video/webm" />
       <source src="video.ogg" type="video/ogg" />
</video>

Now webm file plays in my waterfox browser but same result on chrome and IE

Fixed little bit now video plays in chrome and firefox using webm. but bot work with IE — smk, Sep 11 '13 at 08:12

score 0 · Answer 1 · edited May 23 '17 at 10:25

Playing video is tricky, you can try this

<video width="400" height="300" controls>
  <source src="q.mp4" type="video/mp4">
  <object data="q.mp4" width="400" height="300">
  </object>
</video>

The encoding of your mp4 file might not be supported by chrome chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec

If above doesn't work you can try flowplayer It will try to play the video with html5 first then fall back to flash player.

score 0 · Answer 2 · answered Sep 11 '13 at 05:53

0

There are two ways you can do this

use a J query Plugin Like video.js or go with HTML5

here's the link

answered Sep 11 '13 at 05:53

Ved Parakash

1
1
1

I downloaded video.js. there is a demo page if am i correct it should play the video but it has the same problem – smk Sep 11 '13 at 06:02
Which Browser you are using Brother ? is it HTML5 Browser or not ? Can you Please Describe the problem for Video.js because video.js is working fine on my chrome and Mozilla Firefox – Ved Parakash Sep 15 '13 at 04:13

score 0 · Accepted Answer · answered Sep 11 '13 at 06:32

0

Try providing appropriate codecs for all the video files. Like this:

<video width="400" height="360" controls>
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
    Your browser does not support the video tag.
</video>

answered Sep 11 '13 at 06:32

dentuzhik

742
8
18

Go to project folder and run the web page directly from browser to check it... If you use developing tools (like VS), debugging may not give the correct results – smk Sep 13 '13 at 08:01

Display Video in html5 web

3 Answers3