I'm building a website with php that echos the following html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="video_media" style="position:relative; z-index:1; display:block; margin-left:auto; margin-right:auto; width:700px;" controls>
<source src="uploads/15 dialogo 13.mp4" type='video/mp4'>
</video>
</body>
</html>
When I view the page in google chrome there is only a set of controls. The audio plays if I press play, but the video does not show in google chrome. In safari and microsoft edge the video will show up and play fine with the controls.
I didn't tag php in this because when I make an html file with this code the same thing happens, so I'm fairly sure its not an issue with the php.
I've googled this a lot in the last couple days and I haven't been able to find anything about other people having the same problem. I've changed settings on chrome on my computer to try to view the video but that hasn't done anything. I also don't think that it's a chrome settings issue since I've never noticed other sites' videos not playing on my browser.
If there's an obvious answer that I'm missing, sorry... I'm fairly new to web design and I've never used videos on a web page before. If there is another question that has been asked that has the same answer, also, sorry. I did search here first, but I might have missed it. Please just point me to that page. Thanks,
------------UPDATE------------
It doesn't work on firefox either by the way.
Also, I can download the file with audio and video working after download. It's just not playing in the browser.
Can you try with:
<source src="./uploads/15 dialogo 13.mp4" type='video/mp4'>
or meaby changing the name of the video:
<source src="./uploads/test.mp4" type='video/mp4'>
--UPDATE--
Apparently the problem is generated by video codecs
I have one mp4 video that won't play in Chrome or Firefox. The audio plays, with the controls, but no video. What fixed it was pulling the video into Final Cut Pro, which said that it was a non-standard size or format, then I "shared" (exported) the file back onto my hard drive. The new file plays in all the browsers. The file size jumped from 32 MB to 98 MB, for a three-minute SD video.
Related
I am currently making a static site that makes use of a .mp4 video. I am using Middleman and hosting with Heroku (free plan). On my local server everything works wonderfully, but in the deployed Heroku version the video appears as a black box. In Safari and Firefox there is no container at all. All my other assets seem to be loading nicely. The video is 5.9 mb. Any idea what is going on here? Thank you in advance!!
<video class="vid-home" src="/videos/home.mp4" autoplay loop muted></video>
In theory, if you do not specify a 'poster' image to display before the video starts, the browser should display the first frame of the video:
http://www.w3schools.com/tags/att_video_poster.asp
In practice browsers seem to implement this inconsistently, and I have seen some mobile devices cases where certain videos display the first frame and others a black box, even for the same video types.
To avoid the issue you can specify your own image to be displayed using the mechanism mentioned in the link above - this should work consistently across browsers. The HTML will look something like:
<video class="vid-home" controls poster="yourImage.png" autoplay loop muted>
<source src="/videos/home.mp4" type="video/mp4">
Your browser does not support the video tag or format.
</video>
Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.
I am trying to use video.js to play an mp4 file. It will not play in IE9. It plays fine in Firefox and Chrome. If I open the video in windows media player, it plays fine as well (perhaps IE9 and windows media player use the same codecs?). I have now confirmed that IE9 is not even requesting the file.
See example here: http://devonline.northcarolina.edu/lcl/ded_prod/exams/video/jstest.html
<html>
<link href="video-js/video-js.css" rel="stylesheet">
<script src="video-js/video.js"></script>
<script>
videojs.options.flash.swf = "video-js/video-js.swf"
</script>
<body>
Video should be here:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264" >
<source src="http://devonline.northcarolina.edu/lcl/ded_prod/exams/video/student/invite.mp4" type='video/mp4' />
</video>
</body>
</html>
Two things to try.
Try putting the full path to the video in the src attribute, e.g.
src="http://www.mywebsite.com/path/to/the/video.mp4" as sometimes
IE needs this.
Failing that try re-encoding the video using something like Miro
Video Converter as not all MP4 files are the same and what one
browser can play another may not be able to.
This issue also exists in IE10.
There's something going on with HTTP compression in your example. If you use Fiddler to remove the outbound Accept-Encoding request header, your server properly avoids using GZIP compression on the response. Then IE has no problem playing back your video.
Generally speaking, you should avoid having your server GZIP MP4 content before returning it; it's bad for performance and rarely saves a significant number of bytes (since mp4 content is already highly compressed).
I figured it out. It was that the request was going through the CMS I was using. The CMS can't handle requests for partial files, so it just outputs the entire thing each time. So, in my .htaccess I made it so that my mp4 files would not be routed through the CMS anymore and it started working.
I am working to develop a desktop application for PC using node-webkit. When I run the app with node-webkit everything works great with the exception of the mp4 videos. The html 5 video box pops up, but it is pure white and the controls are grayed-out in the same way it does if I provide a bad file path and run the app in chrome. An example piece of my index.html file:
<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="c" data-tolerance="15,15" class="ui-content">
<video width="497" height="298" style="max-width:100%;" controls>
<source src="base/tutorialvideos//General_Tutorial.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="ui-btn ui-btn-right">
Tutorial
</div>
I double-checked the file path several times, and tried all combinations of /, //, \, \ just to be sure. I tried using the full file path instead of the relative with the same results.
I then used a format converter to change one of the videos from .mp4 to .ogv with the same results.
What is really curious, is that I am pretty sure that it IS seeing the videos, because with the code as is posted above, the controls are semi-responsive. I can toggle between play and pause and drag the slider. When I drag the slider to the end, it shows the exact run-time of the video, but still no audio or video.
It just occured to me that jquery mobile could be messing it up, so I'll post this and run a test with pure html 5.
Thanks is advance for any info.
node-webkit only supports patent "free" codecs out of the box. You can however enable mp4/h264 support which is described here: Using MP3 & MP4 (H.264) using the video & audio tags..
Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.