I have the following code:
<video id="v2" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264"
data-setup="{}">
<source src="uploads/5148dc022c494_183a658049ae973e1f3451450d689f39.wmv.mp4" type='video/mp4'>
</video>
I've implemented the relevant JS scripts at the <head> tag and I can see the player frame loading including the controls, however the video is not displayed.
When I check the console log I can see some sort of error, the only thing I can see is:
Video Error
_V_.Event {originalEvent: Event, type: "error", isDefaultPrevented: function, timeStamp: 1363730623374, vdata1363730622853: true…}
I can unfold that message to view more details but nothing really tells me why the script fails.
The video itself is working when I download it. I can watch it with my windows media player without any issues.
Note: I'm using the latest Chrome version (tested IE10 as well, not working).
Most obvious reply would be to say that your video is not mp4 but wmv
either convert it to mp4 or use wmv type attribute
mind the extension which is currently .wmv.mp4
Related
I have an application which needs to embed videos (mp4, HTML5). The catch is that these videos can be located anywhere on the server hosting my application and not just in the directory of the app. If that were the case, my code would look something like this:
<video preload="auto" controls>
<source src="assets/media/video.mp4" type="video/mp4">
</video>
In my situation, my videos can be living in any location such as C:/Users/media/video.mp4 which would make me do something like this instead:
<video preload="auto" controls>
<source src="C:/Users/media/video.mp4" type="video/mp4">
</video>
The problem I run into is that Chrome (and other browsers most likely) obviously block this sort of external access. My workaround for this has been fetching videos at the server level (Tomcat server), converting them to a byte array, and giving that to my HTML. My Angular code sanitizes the byte array and then serves it to my HTML.
Angular:
this.http.get(url).subscribe(data => {
this.mediaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(data);
});
HTML:
<video preload="auto" controls width="75%" height="50%">
<source [src]="mediaSrc" type="video/mp4">
</video>
This strategy works some of the time. However, every so often my video completely stops working and doesn't display in Chrome. This only happens some of the time and seems to be completely random. Almost as if chrome runs out of memory and or blocks the video if it doesn't like it. Loading the page in a new tab however completely fixes the problem.
My question: is there a better way to deliver video from the server level or is there something I can fix with my current implementation so that I don't run into the issue mentioned above? I would love to go into my issue more but I really can't put my finger on what is causing this issue to randomly occur and only on a given tab of a given browser.
Video not working was fixed by using .webm videos on Chrome instead of mp4.
I want to play a video with html5 video tag from a network server.
I'm also make the test with an image, but I got, with Google Chrome, the error "Not allowed to load local resource".
I've already searched and this happens by security reasons of the new web browses.
For the video I'm using the basic html. If I play the video from my computer, like, it work well (obviously)
<video width="320" height="240" controls>
<source src="videos/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
But when I change the source to: 'file:///fileof1/FILESRV/videos/movie.mp4', nothing happens.
Anyone with a solution?
I have an HTML page that contains a MP4 video:
<html>
<body>
<video width="800" height="600" controls>
<source src="/static/xyz.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
When I load the page in Firefox, it doesn't show the play control buttons but shows error message "No video with supported format and MIME type found" (see the screenshot below).
So I use this site to test my browser's ability to play HTML5 mp4 video and it can successfully play the test video on that site. My Firefox version is v36 on CentOS Linux. I also tried using Chrome and it can't play it either. I also tried it on Firefox/Chrome on Windows but failed. I then use the Firefox debugger to look at the debug info and I see the following message:
Media resource http://localhost:5000/static/xyz.mp4 could not be decoded.
All candidate resources failed to load. Media load paused.
I then tried playing the xyz.mp4 video on my local machine using Linux's movie player and it plays fine and it also plays fine in Window's media player. But when I use the above HTML5 <video> tag, it doesn't play for all browsers in both Linux and Windows. I also followed Mozilla's online forum to change the browser settings and clear caches but none of them works. So what caused the problem of this simple HTML5 ?
This is very likely the problem with your video file. mp4 is not really a format, but a container that can hold video in different formats. Firefox supports only H.264 encoded video.
Simply speaking, there are several types of mp4 files and not all of them are supported by browser. To verify this, you can download one of the videos from the quicksmode website and replace your video with it.
Possible solution:
//autoplay muted onloadedmetadata="this.muted = true"
<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
<source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
Your browser does not support the video tag.
</video>
Every browser, with exception of Chrome will not properly display my HTML5 video.
http://cordeck.ba.lightburncloud.com/test-video
Here is my markup:
<video class="video-js vjs-default-skin" controls="" autoplay="" preload="auto" data-setup="{}">
<source type="video/ogg" src="/files/videos/sample.ogg">
</video>
Firefox, for instance, displays the following message within my video box:
No video with supported format and MIME type found
In the error console, I get the following message:
HTTP "Content-Type" of "image/ogg" is not supported. Load of media resource http://http://cordeck.ba.lightburncloud.com//files/videos/sample.ogg failed.
To my knowledge, image/ogg type does not exist, nor do I use it in my site. What gives?
This issue was resolved. Apparently the CMS serving up the image was attaching its own MIME types and storing them alongside the file in the database.
The web server was sending the correct type, but getting overridden by a third party app.
Below is the code I am using for the video tag. I basically copy and pasted it off of the Video.js website (then updated with my own file names). At first I could get Chrome to work but not Firefox or Internet Explorer. Then I changed the "webm" tags to "web". This fixed issue with Firefox, but I still can't get any playback with IE9. It just shows up as if it trying to load. Right now I am simply trying to test it out using local files in the same root folder, so I don't think it is an issue with waiting for it to download. My video files range from 8.1 to 8.4 meg.
If anyone has any ideas one how to get this to play, it would be greatly appreciated. Thank you in advance.
The following is in the head tag:
`<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf"`
</script>
The following is in the html tag:
`<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="bdg-vid-poster.png"
data-setup='{}'>
<source src="bdg112412hr.mp4" type='video/mp4' />
<source src="bdg112412.web" type='video/web' />
<source src="bdg112412.ogv" type='video/ogv' />
</video>`
I'm not sure why you changed the name from webm to web - webm is the proper extension to use. That line should read:
<source src="bdg112412.webm" type='video/webm' />
Do you have valid video files for each of the three video types (mp4, web, and ogv)? What happens when you drag and drop the mp4 directly into IE9? Try the webm in Chrome and the ogv in Firefox.
If you are not certain your video files are valid, try downloading the sample files here. (See the "Download Video" links under the video).
Also helpful for me was the preload="auto" had to be preload="none" or else it waited to load the entire video before playing...a real drag...
Check the mime-type configured on the server.
I had problems with mp4 and IE9. And i just had to change the myme-tipe from video/mpeg to video/mp4.