I actually have a probleme playing some MP4 video on my phone.
I'm on android 5.0.1, using Chrome 47 with this simple html code :
<!doctype html>
<html>
<head>
<title>ssqsq</title>
</head>
<body>
<video controls="" autoplay="" name="media">
<source src=x type="video/mp4">
</video>
</body>
</html>
Let say 'x' is a variable where is my source address.
When the address is : http://www.w3schools.com/html/mov_bbb.mp4 , Chrome read the video without probleme.
But when x is : http://someurl/files/atoms/video/mov_bbb.mp4
(it's the same video, literaly. I download from w3s to upload on this website), my chrome isn't abble to read the video
'someurl' has an .htaccess, but this not seem to be the probleme since the video play normally on chrome(on my desktop) and even on my androind (using FireFox 43.0)
I have thinking of codec probleme when i was working with other video, but this one (mov_bbb.mp4) does not change between w3s and 'someurl'
I don't know where it could come from.
Not the codec, because video play well on w3s.
Not the server configuration because the video play well on firefox and on desktop...
Advice and help would be thankfull!
Related
Unable to play live stream on chrome.
I have created small html file in which i am passing tcp or http url of live streaming in video tag of html but it doesn't work. please find the screenshot of codec information in screenshot below.
<!DOCTYPE html>
<html>
<body>
<h1>
Testing H264 on chrome html5
</h1>
<video width="800" controls>
<source src="tcp://[2612:f777:f:240e::898]:55151" type="video/mp4">
</video>
</body>
</html>
profile set is baseline and i have tried replacing tcp with http but it doesn't work
expected : live stream should play on chrome
actual : black player screen only
Codec info
chrome does not support tcp:// as a protocol. In fact it does not support any live "streaming" protocol. You need to use a player like video.js or hls.js (which uses MSE) along with a proper format like DASH or HLS
The mp4 video does not play from localhost.
But mp3 audio works.
i.e.
Following code for playing video (stored as C:\inetpub\wwwroot\video\testVideo.html) does not work when accessed through (http://localhost/video/testVideo.html)
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
But, following code for playing audio (C:\inetpub\wwwroot\audio\testAudio.html) works when accessed through (http://localhost/audio/testAudio.html)
<!DOCTYPE html>
<html>
<body>
<audio width="400" controls>
<source src="audip.mp3" type="audio/mp3">
Your browser does not support HTML5 video.
</audio>
</body>
</html>
However, they both work when webpage is launched by double clicking on html file i.e. webpage is accessed through (file:///C:/inetpub/wwwroot/audio/testAudio.html) or (file:///C:/inetpub/wwwroot/video/testVideo.html)
Please explain what am I doing wrong. And how to make video play from localhost.
I am using following browsers:
IE 11.0
Chrome 44.0
Firefox 40.0
I finally figured it out.
The video doesn't play via localhost, because IIS localhost in Windows doesn't contain MIME type entry (video/mp4) for .mp4 file format.
To make this work, a MIME type entry should be added in following way:
Open IIS Manager
Select your machine from Connection panel
From middle panel, double-click 'MIME Types'
Right-click on the list and select 'Add' option
Add file extension and MIME type e.g. for MP4 videos, file extension: .mp4 and MIME type: 'video/mp4'
Thats it.
Now refresh your page and Bingo!. It works.
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>
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="300" height="170" poster="../images/audi/audi_poster.png"
data-setup="{}">
<source src="../videos/audi/audi.mp4" type='video/mp4'>
<source src="../videos/audi/audi.ogg" type='video/ogg'>
<source src="../videos/audi/audi.webm" type='video/webm'>
</video>
</body>
</html>
For the above code, the file plays without any error on Google Chrome but not on Firefox and IE.
I have no idea where I am wrong.. PLease help.. I really need to solve this issue.
pls help
The website runs on goddady server. I am not using any database to store the video file nor any php programming.. I simply upload the video to the server n the the html file...
Its a very simple page I want to have with the video playing for all 3 browsers..
The HTML5 video and audio tag support is not the friendliest at the moment.
Firstly you DOCTYPE should be <!DOCTYPE html> as mentioned in the comment. Then there are a couple of things to consider:
Firefox doesn't support MP4 playback, neither does Opera. You will need to convert the video from MP4 to WEBM or OGG format and put them in the same directory as the MP4 to suit your example.
IE8 and below don't support the <video> tag at all and I'm guessing that's the problem with your IE version. IE9 does support MP4 playback however.
After having a good play with this for a project I am currently working on here are some of the issues I also came across:
iOS devices (and mobile devices in general) don't really like the tag (especially inline), after playing with it for a while I ended up just straight linking to the MP4 video and it now opens up in the default player.
Google Chrome or IE9 don't support a fullscreen button yet, but Safari does. Haven't checked FF or Opera, see below.
To avoid the need for users to upload 3 different files. I've added a flash fallback (Flowplayer) for FF and Opera (and any browser that doesn't support MP4 <video> playback). I may create the WEBM or OGG files on the server, but this also helps with older browser like IE8. Here is a JavaScript snippet on how to check support for MP4 playback:
var flashaudioplayer=false;
var flashvideoplayer=false;
// Check if browser supports HTML5 native mp3/mp4 playback
var audioTag = document.createElement('audio');
var videoTag = document.createElement('video');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
flashaudioplayer=true;
}
if (!(!!(videoTag.canPlayType) && ("no" != videoTag.canPlayType("video/mp4")) && ("" != videoTag.canPlayType("video/mp4")))) {
flashvideoplayer=true;
}
You will also find the same issues with MP3 playback support in the <audio> tags, Flowplayer also has a way to play MP3 files so it's a nice option for a flash fallback.