For some reason, my video on wordpress wont show up when I use iframe to view it. In I.E., it automatically loads the video into the windows media player versus playing through the iframe.
I am using a local mp4 for the video's. From what I can tell, there's no issues with my I-Frame code. Anyone got any idea's? I cant get it to play in the iframe!
You should not be using <iframe>'s like that. In the past it was a relatively more popular method, but extremely unreliable even back than.
What you should do instead is either encode your video's as .flv's and use flash to play them, or encode them for the 'new' html5 <video>-tag for which no additional plugins are required. To get the best results with the new tag you should convert for 3 different codecs, but H.264 gets you quite far. This is how it ends up looking if you have converted multiple formats:
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
And you can read more about it here.
Related
Every tutorial/explanation I see out there that discusses HTML5 video format fallbacks use this type of markup as an example:
<video autoplay>
<source src="/myvideo.mp4" type="video/mp4">
<source src="/myvideo.webm" type="video/webm">
Sorry, your browser doesn't support HTML5 video.
</video>
So my question, why does everyone suggest to put the MP4 before the Webm format? If your browser supports Webm, it almost definitely supports MP4... The above markup essentially ensures that the more efficient Webm video will never be used, even though it has arguably better compression and will reduce bandwidth. Why is this?
Am I missing something about the way video fallbacks work?
It has to do with backwards compatibility with iOS 3 devices. iPads running iOS 3 had a bug that prevented them from noticing anything but the first video source listed.
MP4 video type was the only supported video format, so if the mp4 version of the video is not the first source, it is ignored.
So, if you want to deliver video to iPad owners who haven’t yet upgraded iOS, you will need to list your MP4 file first, followed by the rest of the video formats.
Read more
I have an HTML5 video player that plays mp4 videos (I only have mp4 videos as I'm not a fancy man with fancy multiple codecs).
I would like to display an error message for when the mp4 videos aren't supported or for when the asset is missing but the whole internet just seems to be people complaining they can't find videos so it's been hard to find a reliable source.
Long story short;
How do I add error messages for when the video is missing or if the codec isn't supported by the browser.
The video code is nice and simple, the source is generated from a server side script and it looks as follows;
<video controls height ="500px">
<source src="videos/movie.mp4" type="video/mp4">
Your browser does not support this video player, please consider upgrading to a modern browser or contact your sysadmin.
</video>
If you listen for an error event on the <source> element, it will tell you if loading fails.
<source src="videos/movie.mp4" type="video/mp4" onerror="alert('Could\'nt load video')">
Though you might want to just listen from JavaScript. ;)
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'm using video.js to embed videos with HTML5 and the video simply plays too fast. I press the play button and I can tell it's at least 1.5x the proper speed.
Any ideas?
EDIT: Sorry! No code. Here you go. By the way, it's copied from videojs.com itself.
<video class="video-js vjs-default-skin" controls
preload="auto" data-setup="{}">
<source src="http://foo.bar/wp-content/uploads/date/video.mp4" type='video/mp4'>
</video>
No webm video for now, I'll work on converting the mp4 to that later.
Also, I'm using this in WP; the admin posts videos that we uploads. No video width, height, poster, or id defined.
Most likely your video is not properly encoded to be compatible with web browsers.
How did you get the video file in the first place
Where does it work
How did you preprocess it for web
Can anyone give a concise instruction on how I can have a flv play from my html page please?
With video.js its very easy. All you need to do is include js & css in head & then use html5 code as:
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480"
data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
<source src="video1.flv" type="video/x-flv">
</video>
</body>
For further details: http://videojs.com/
Actually, I did not find information specified about playing flv files. But it works fine. :)
You can use other video formats using video.js all you need to change is type as...
<source src="..." type="video/mp4">
Moreover, there might some issue regarding your browser, does your browser support the .mp4 format, I could not play .mp4 in chrome, but it works fine in firefox. Try adding more sources with same video in different formats. Like...
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
<source src="video1.webm" type="video/webm">
Wrap a flash player around it, such as Flowplayer. There currently is no other way; browsers can't just render an FLV by itself.
See the installation guide for Flowplayer, taking you step-by-step on how to place the video directly into your HTML.
I'm fairly certain that shadowbox can also play FLV files: http://www.shadowbox-js.com/
It's clean, minimal and fairly simple to setup.
You can try https://github.com/Bilibili/flv.js
With flv.js, You'll get:
Pure HTML5 + JavaScript Video Player for flv videos
Pure HTML5 + JavaScript LiveStream Player for http-flv streams
Flawless experience
Smaller size than H.264 Videos
Flv.js utilizes MSE (Media Source Extensions) therefore it'll only be available on Chrome 43+, Firefox but not Apple / iOS Safari.
Flv.js instantaneously transmuxes flv streams to H.264 streams and then push the H.264 stream to Media Source Extensions. It'll display as a video tag in HTML Element with a blob URL.
Another really popular Flash player is the JW Player, at http://www.longtailvideo.com/ . They have a nice setup wizard that generates the code you need.
Insert an SWF object into your HTML and assign the FLV in the attributes as the video that will play.