Menu
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?
673
The <vid eo> element allows us to embed video files into an HTML, very similar to the way images are embedded. Attributes we can include are: src This attribute stands for the source, which is very similar to the src attribute used in the image element. We will add the link to a video file in the src attribute.
To embed a video in an HTML page, use the <iframe> element. The source attribute included the video URL. For the dimensions of the video player, set the width and height of the video appropriately. The Video URL is the video embed link.
The MP4, WebM, and Ogg formats are supported by HTML.
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 /> <a href="__VIDEO__.mp4">MPEG4 / H.264 “.mp4” (Windows / Mac)</a> | <a href="__VIDEO__.ogv">Ogg Theora & Vorbis “.ogv” (Linux)</a> </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: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"OGG"</a> </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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
