I am using mediaelement.js to place a video onto the web page. For those unfamiliar with it, it is a video player element that takes in a single source video and displays in various formats (HTML5 or flash) based upon browser capabilities
The mp4 that I am using has the captions embedded into itself. Is there a way with HTML5 or mediaelement.js to display these captions. I know that I can pull an external track:
<track kind="subtitles" src="subtitles.srt" srclang="en" />
but since it is embedded I would prefer to use those. This is what my code looks like:
<video width="640" height="360" style="width:100%; height: 100%;" src="myvid.mp4" type="video/mp4" id="video1" controls="controls">
<source src="myvid.mp4" type="video/mp4" />
<object width="640" height="360" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=myvid.mp4 />
<!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
No video playback capabilities
</object>
</video>
Related
My video player shows, but when I click play it acts as if it is loading the video, stops, but doesn't play.
<object width="100%" height="100%"
type="video/x-ms-asf" url="videos/agent_orange.wmv" data="videos/agent_orange.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="videos/agent_orange.wmv">
<param name="filename" value="videos/agent_orange.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="videos/agent_orange.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
This came from a tutorial from here.
Video embedding is not natively supported in HTML 4. Media playback highly relies on the available media plug-ins so compatibility is a big issue.
In order for WMV to work on most browsers the user must have the correct plugin installed.
The best solution would be to use multiple video formats as fallback solutions. I would highly recommend looking at HTML 5 and the multimeda elements you can use are much more advanced than the ones in HTML 4. Using the Video element in HTML 5 would allow you to use:
MP4 = MPEG 4 files with H264 video codec and AAC audio codec
WebM = WebM files with VP8 video codec and Vorbis audio codec
Ogg = Ogg files with Theora video codec and Vorbis audio codec
If you had all of these video formats as fall backs then it would work in most browser (ie 9+)
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.WebM" type="video/WebM">
Your browser does not support the video tag.
</video>
var player = $("object")[0];
player.controls.play();
I am trying to use a video element for HTML5 video and a nested element for Flash fallback. I have seen code using flowplayer to fallback to flash - but their documentation only shows a javascript interface. Is there any way to do something like what is below? To test, I remove the two lines with "source src="... "
If I have to use javascript for the flash, how would I code it in line with HTML5?
Thanks!
<video id="movie" width="640" height="360" preload controls>
<source src="./videos/fiddler-tradition.ogv" type="video/ogg; codecs=theora,vorbis" />
<source src="./videos/fiddler-tradition.mp4" />
<object id="flowplayer" width="640" height="360"
data="./flowplayer/flowplayer-3.2.16.swf"
type="application/x-shockwave-flash">
<param name="movie" value="./flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":"./videos/fiddler-tradition.flv"}' />
</object>
</video>
The above non java flowplayer code (the code within the object tag) works fine when outside the video tags. I realize my issue is testing the fallback without html5 on my localhost machine while all I have available is an html5 browser. I will upload to the web and try on another pc with an older browser.
UPDATE: All is working - Testing in IE7, the code falls back to flash player. Yeah!
If I set my video tag up to be something like
<video src="myvid.mp4"></video>
IE9 plays the video in its entirety, if however I have it as
<video>
<source src="myvid.webm" type="video/webm" />
<source src="myvid.ogv" type="video/ogg" />
<source src="myvid.mp4" type="video/mp4" />
</video>
The video plays for about 3 seconds and then stops.
Unfortunately if I use the first method then browsers like Firefox don't look at the <source> attributes and refuse to play.
Lots of research has ruled out MIME types and video encoding as potential issues.
The full code for what I currently have is:
<video controls="controls" poster="<?=$template_path;?>/images/home-video.png">
<source src="<?=$template_path;?>/videos/intro_blue.webm" type="video/webm" />
<source src="<?=$template_path;?>/videos/intro_blue.ogv" type="video/ogg" />
<source src="<?=$template_path;?>/videos/intro_blue.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="600" height="600">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="flashVars" value="controlbar=over&image=<?=$template_path; ?>/images/home-video.png&file=<?=$template_path; ?>/videos/intro_blue.mp4" />
<param name="wmode" value="transparent" />
<img alt="Intro" src="<?=$template_path; ?>/images/home-video.png" width="600" height="600" title="No video playback capabilities, please download the video below">
</object>
</video>
I think the issue may be in server settings. You don't need the MIME type for video content. And IE is strict with it. See here for example.
In my case it seemed to be IE9 behind certain firewalls was not allowing the video to download completely (other browsers allowed it).
I wasn't happy with this so as a precaution I forced IE9 to use flash.
I have a simple HTML5 oriented local page, that can correctly and consistently playback a simple video loop using MP4 and WebM formats correctly under Windows Vista and Windows 7 using IE 9 and Google Chrome 13. Under FireFox 3.6.20, the designated OGG Video file will play, but once completed, will not go back to the beginning of the video clip and play again.
My HTML for performing the video playback is as follows:
<video class="video-js" width="600" height="400" poster="images/home.jpg" preload="auto" autoplay="autoplay" loop="loop">
<source src="videos/home.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/home.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="videos/home.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="600" height="400" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"playlist":["image.png", {"url": "home.mp4","autoPlay":true,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="images/home.jpg" width="600" height="400" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
Is there a way that I can have FireFox go back to the beginning of a video, home.ogv, and resume playing once it has finished its initial playback?
My apologies if this might be a duplicate question, but I've tried to narrow down my HTML the replicate the auto-playback issue as much as I could, and none of the other solutions posted on the recommended subjects seemed to get me closer to a working solution.
Thank you in advance for your time, help and patience...
Loop attribute won't work, you'll need some JS workaround. You could just use JPlayer or maybe JW Player and let it work it out for you.
I have a blog section on my site that has the TinyMce editor. I want to embed a video when I post a blog and it's just spitting out the code. I have added the <embed> tag on my output script.
This is the code I'm using to for the video:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/CgW_5Vthsds"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>
What am I missing?
You should look into Video For Everyone:
Video for Everybody is very simply a chunk of HTML code that embeds a video into a website
using the HTML5 element which offers native playback in Firefox
3.5 and Safari 3 & 4 and an increasing number of other browsers.
The video is played by the browser itself. It loads quickly and doesn’t threaten to crash your browser.
In other browsers that do not support , it falls
back to QuickTime.
If QuickTime is not installed, Adobe Flash is used. You can host locally or embed any Flash file, such as a YouTube video.
The only downside, is that you have to have 2/3 versions of the same video stored, but you can serve to every existing device/browser that supports video (i.e.: the iPhone).
<video width="640" height="360" poster="__POSTER__.jpg" controls="controls">
<source src="__VIDEO__.mp4" type="video/mp4" />
<source src="__VIDEO__.webm" type="video/webm" />
<source src="__VIDEO__.ogv" type="video/ogg" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"><!--<![endif]-->
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4" />
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br />
MPEG4 / H.264 “.mp4” (Windows / Mac) |
Ogg Theora & Vorbis “.ogv” (Linux)
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
There is an updated version that is a bit more readable:
<!-- "Video For Everybody" v0.4.1 by Kroc Camen of Camen Design <camendesign.com/code/video_for_everybody>
=================================================================================================================== -->
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls preload="none">
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video -->
<source src="__VIDEO__.webm" type="video/webm" /><!-- Chrome / Newest versions of Firefox and Opera -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
<!-- fallback to Flash: -->
<object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: "MP4"
Open Format: "OGG"
</p>
If you have an mp4 video residing at your server, and you want the visitors to stream that over your HTML page.
<video width="480" height="320" controls="controls">
<source src="http://serverIP_or_domain/location_of_video.mp4" type="video/mp4">
</video>
Most likely the TinyMce editor is adding its own formatting to the post. You'll need to see how you can escape TinyMce's editing abilities. The code works fine for me. Is it a wordpress blog?