New to html, can't get video to play in browser? - html

I am unable to get my video to play in browser when I click the "play" button. I would greatly appreciate the help. Thanks!
<video poster= "videoposter.jpg" width="40%" height="40%" controls= "controls">
<source src="video/phone.mp4" type='video/mp4'/>
<source src="video/phone.webm" type='video/webm; codecs"vp8, vorbis"' />
<source src="video/phone.ogv" type='video/ogv; codecs="theora, vorbis"'/>
Your browser doesn't support the video element in HTML5.
</video>

Possible reasons could be :
1). File path of video isn't correct. Look at developer console in browser to get this rectified.
2). IIS in Win 7 Pro does not have mp4 in it's mime types. Must add add the mime type. see instructions for adding mime type in link below.
http://stackoverflow.com/questions/14079808/html5-video-is-not-playing-mp4-error-invalid-source/

Related

video in html5 is not working in all browser

I tried this code but video is just continuing to load, not to playing.
I also tried video codec H-264 but that is not working.
Next I tried to convert mp4 video to webm but that did not help either
Can anyone tell me how to do this using jquery and ajax?
<video controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Did you checked by drag and drop to open the movie.mp4 or the movie.ogg file?
If the file does not work by simply opening it using a browser, it might be the file's problem, not the code or the browser.
For the file type support per browsers please refer the "Can I use?" pages:
MPEG-4/H.264
Ogg/Theora

HTML5 Simple Video Player. What did I miss?

First I made a screen recording as a video I would like to display.
Than I uploaded the video to VLC to convert the video.
I made one MP4 and a fallback for OGG.
I then moved the videos to my dropbox account so I can host them there.I right clicked and got the link to each video from dropbox. I am trying to use the links as the src in the video tags.
<video width="400" controls>
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=0" type="video/mp4">
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=0" type="video/ogg">
</video>
Even though I told VLC to convert it to MPV, the file extension is m4v.. Is that the same thing?
The video just shows blank. Not getting any errors either.Not sure what I missed.
The following Fixed it for me.
I made two changes:
change dl=0 at the end of your dropbox link to dl=1. I believe this makes it a download link instead of a page to view a download link.
Due to a bug in chrome on OSX certain mp4 files will fail to play correctly (some kind of graphics acceleration issue), but it won't fall back to the ogv. For this reason, i have placed the ogv as first since it will work on OSX-chrome, and platforms that don't support it should fall back to the mp4.
<video width="400" controls>
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=1" type="video/ogg">
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=1" type="video/mp4">
</video>

How to load video in my website

I have a website where I am trying to show a video.I have 2 mp4 format videos and both are ok(not corrupted).When I try to show these two using tag in html5 one is working but another is not working.
I have used the code given below
<video width="320" height="240" controls>
<source src="video/v1.mp4" type="video/mp4">
<source src="video/v1.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls>
<source src="video/theme.mp4" type="video/mp4">
<source src="video/theme.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
here,in firefox first one is working great but the next one shows the error "No video with supported format and mime type found".In chrome first one is ok and second one only shows audio.
Please help me to solve this.
Thanks in advance.
Check to see if video/theme.mp4 is accessible in the browser. View source and try clicking the link or see if it is loaded in the resources in the development tools. It sounds like Firefox can't find/read theme.mp4 or theme.ogg so is displaying the error message. Chrome can't find theme.mp4 either but is reading it's MIME Type it as audio/ogg rather than video/ogg.
You could try this page and see if it helps, the MDN always has useful stuff:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

html object tag should we specify type as video/mp4 to play mp4 videos?

I know that object tag embeds objects in html and useful for playing videos/audios.
When we specify object with type="video/mpeg" does this use the default player in the device
I am having an issue in playing mp4 files. When i use object tag.
It is able to play mpeg-2 transport stream though.
Also the device player specs says they support mp4.
Am i missing anything here.
You might get help from this website mentioned in this answer to a similar question.
Edit:
html object tag has some limitations like the other tags used to play videos. I think this will give you a more clear idea. There you'll see that the best solution is to use 3 different methods together like this:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
Your browser does not support video
</embed>
</object>
</video>
In this example, The HTML 5 video element tries to play the video either in mp4, ogg, or webm formats. If this fails, the code "falls back" to try the object element. If this also fails, it "falls back" to the embed element.
And the easiest way to display videos in HTML is to use YouTube.
Anyway, you'll understand it better if you read the whole thing there.

How can I link to an .mp4 video in my site?

I have a web site and I want to link a button to a video. So whenever someone clicks the "video" buttons let's say, I want to open the video.mp4 in a new browser. What I do is:
<div>...</div>
The video is quite big (190MB) so the code above is not working. I start listening to the sound but cannot see the image.
Does anyone know how to do it? Or any simple way to just open this video as a link?
You could use HTML5 tag don't forget that MP4 is only supported by IE 9+, Chrome 5+ and Safari 3+. You should at least convert your file to WebM or Ogg to make it compatible with all recent browsers.
To do so you would need a new page (where the link goes) and in this page have this code:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
/* instead of the last line you could also add the flash player*/
</video>
The browser will automatically select the first known format and play it. (source: w3Schools.com)
Hope this helps!