HTML5 video not playing
Question
I tried a simple example for HTML5 but it doesnt seem to work.
<!DOCTYPE html> <html> <body> <video width="320" height="240" controls="controls autoplay"> <source src="resources/sample/sample1.mp4" type="video/mp4" /> </video> </body> </html>
I tried the example on chrome, the video loads up, but it does not play, i can see the video frames if i move the slider to and fro but the video itself doesnot play.
UPDATE: I accessed this on localhost(tomcat), its still reacting in the same way. Also i noticed that i am not able to play any HTML5 videos on chrome or firefox(updated).
16 answers
solution1
11 2014-03-05 19:32:03
Add "controls" as a flag. It allows the browser to run it's own player code on the video. I tried this with a .mp4 file on Chrome and it works.
solution2
5 2013-07-18 03:51:14
I do not agree with Alex Pereora. It can be loaded from local machine just by referencing file names and or paths.
I had similar issue, and turned out 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.
solution3
4 2019-03-05 09:28:39
I faced the same issue now. I am getting the src of the video dynamically and asynchronously using ajax.
The issue was that the <video> element was getting loaded before the src . If we put the <video> element into the DOM after the src is loaded then the issue will get fixed.
In case of Angular we can use *ngIf to fix the issue. Below is Angular code snippet:
<video autoplay *ngIf="src" class="thumbnail">
<source [src]="src" [type]="type">
</video>
solution4
3 2014-11-19 05:29:06
use both format it works fine in all browser:
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>
solution5
3 2020-06-12 22:09:44
对我有用的是将 mp4 格式从 V1 转换为 V2：
ffmpeg.exe -i old.mp4 -brand mp42 new-v2.mp4
solution6
2 2012-05-30 09:27:31
You can't load a localfile like that with the HTML5 Video tag. You'll have to use a localhost or a distant hosted file. Try to install mamp/wamp and load it through the virtual host.
<source src="http://localhost/development/programs/html/html5/sample/sample1.m4v" type="video/mp4" />
solution7
2 2019-04-12 16:57:21
If your type of video is MP4 running on IIS/.NET
Add a web.config file to the root of the application web.config with the following contents
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="application/mp4" />
</staticContent>
</system.webServer>
</configuration>
solution8
1 2018-12-06 07:05:22
Video not playing in server because the mime type is not added in IIS.
To add Mime Type :
• Go to IIS and select your site
• Click Mime Types Under menu and click Add on right side tab
• Under File Name Extension add mp4,under Mime type add video/mp4 and click Ok.
• Restart IIS ,Now run the application
solution9
0 2012-05-30 10:57:46
Try to set a relative uri for your video. The "D:/…" only works on windows locally and not in all browsers.
solution10
0 2012-10-08 12:16:49
Chrome: Does the file contain audio as well? If so and you are playing it on desktop, connect the speakers to the desktop and check.
Firefox: H.264 content is not supported
IE9: The following should be added to your page <meta http-equiv="X-UA-Compatible" content="IE=edge" />
solution11
0 2013-01-02 11:17:30
It may be due to video encoding.Check the encoding of your video and see if Chrome supports that.It may be a possible reason as I faced it. Try some encoders like ff-mpeg to encode videos.
solution12
0 2015-10-13 14:04:16
I got this problem when hosting on IIS, and found the solution Here . In my case, even putting complete video URL on Chrome would give me 404 error, because the MP4 MIME type didn't exist on site config. So, I added .mp4 with MIME video/mp4, and all got right. Dunno if that's the same with tomcat, but that's worth a try...
solution13
0 2017-03-06 18:16:14
add autoplay loop to video tag for play automatically as follows:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay loop>
<source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>
</body>
</html>
solution14
0 2018-09-07 08:34:30
Just set controls as a flag, not as a key=value pair:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>
</body>
</html>
solution15
0 2021-08-01 16:18:20
Just be sure that you had inserted the video path correctly. Your 'resources' folder and the page where is the video tag must be at the same folder.
solution16
0 2022-05-11 07:07:25
This approach will surely work. If this works plz upvote my answer.
<video width="50%" height="50%" loop muted id = "autoplay"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <script> window.onload = function(){ document.getElementById("autoplay").play() } </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.