The video doesn't play:
<asp:DataList ID="DL_Media" runat="server">
<ItemTemplate>
<video src="windowsmedia.ogg" controls="controls" width="215" height="160">
<object id='mediaPlayer' width="215" height="160"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<param name="fileName" value="res/Files/test.wmv" >
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<param name="loop" value="true">
</object>
</video>
</ItemTemplate>
</asp:DataList>
Make sure your browser is compatible
First, make sure the browser you are attempting to view in supports the HTML 5 video element.
Sample code
Taken shamelessly from the developer site at Mozilla:
Embedding a video
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
Embedding a video with multiple sources
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
Specifying codecs required
<video controls>
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
Your browser does not support the <code>video</code> element.
</video>
Other samples on the site include controlling playback and fallback options.
Use source instead of object
<video controls>
<source src="res/Files/test.wmv" type="video/wmv">
Your browser does not support the <code>video</code> element.
</video>
Related
I am working on this website (Developed using Wordpress) and as you can see i have a Background Video in the homepage ( .mp4 file).
The Background Video works on Desktop but not on Android and iOS.
Do you have any tips to solve this issue?
Also via JS...
If you need to convert your video into WEBM and OGV, you could convert it here:
www.converterpoint.com
Disclaimer: I am the owner of that website
Do you have only one format of background video? .mp4
You need three video files .mp4, .ogg, .webm to make your video play on different browsers and devices:
<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>
I have an mp4-video on my computer (a Mac). When I drag the file to a browser window in Firefox, the video plays. So obviously all necessary plugins are installed.
But when I try to embed the video into a XHTML file with the <object>, <video> and/or <embed> tags, using code from this site and elsewhere on the web, I see a message that no video was found in a supported format or MIME-type.
How can I embed a local video into a local XHTML file, so it shows up inside an XHTML page with text surrounding it?
Current code sample:
<video width="640" height="360" controls="controls">
<source src="/path/to/Video%20File.mp4" type="video/mp4" />
</video>
Result:
does the following work for you?
<video width="480" height="320" controls="controls">
<source src="http://serverIP_or_domain/location_of_video.mp4" type="video/mp4">
</video>
Okay, what works is:
<embed src="/path/to/Video%20File.mp4" type="video/mp4" />
Having a problem with Real player embed working when CSS files are referenced from a server location when running the 'test' simplified html webpage locally to replicate the scenario.
Here is the code which Doesn't work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Realplayer Test</title>
<link href="http://domain.com/Content/Styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object id="media"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
height=360 width=640>
<param name="controls" value="ImageWindow">
<param name="console" value="Clip1">
<param name="autostart" value="true">
<param name="src" value="rtsp://domain.com/mediatemp/93088761_hi.rm">
<embed src="rtsp://domain.com/mediatemp/93088761_hi.rm" console="Clip1" controls="ImageWindow"
height="360" width="640" type="audio/x-pn-realaudio-plugin" autostart="true">
</object>
<br>
<object id="media"
classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="320"
height="100">
<param name="src" value="rtsp://domain.com/mediatemp/93088761_hi.rm">
<param name="console" value="Clip1">
<param name="controls" value="All">
<param name="AutoStart" value="true">
<embed controls="All" console="Clip1"
type="audio/x-pn-realaudio-plugin" src="rtsp://domain.com/mediatemp/93088761_hi.rm"
width="640" height="100" autostart="true">
</object>
</body>
</html>
This is what gets displayed in the browser:
Here is the code what does work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Realplayer Test</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object id="media"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
height=360 width=640>
<param name="controls" value="ImageWindow">
<param name="console" value="Clip1">
<param name="autostart" value="true">
<param name="src" value="rtsp://domain.com/mediatemp/93088761_hi.rm">
<embed src="rtsp://domain.com/mediatemp/93088761_hi.rm" console="Clip1" controls="ImageWindow"
height="360" width="640" type="audio/x-pn-realaudio-plugin" autostart="true">
</object>
<br>
<object id="media"
classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="320"
height="100">
<param name="src" value="rtsp://domain.com/mediatemp/93088761_hi.rm">
<param name="console" value="Clip1">
<param name="controls" value="All">
<param name="AutoStart" value="true">
<embed controls="All" console="Clip1"
type="audio/x-pn-realaudio-plugin" src="rtsp://domain.com/mediatemp/93088761_hi.rm"
width="640" height="100" autostart="true">
</object>
</body>
</html>
Style.css is the same CSS markup in both instances. Any ideas why the player would stop working when the CSS file is referenced from a url location. I have uploaded the styles.css files to multiple servers and the same issue happens still.
Thanks.
Browser security would be the thing to look at, since programmatically loading CSS from a URL is now a security risk:
Starting with Firefox 23, Firefox blocks active mixed content by default. This follows a practice adopted by Internet Explorer (since version 9) and Chrome.
If your website delivers HTTPS pages, all content (image, script, video, stylesheet, iframe, font...) delivered via HTTP will be blocked by default. Consequently, your website may appear broken to users (if images don't load, etc.).
Note that since mixed content blocking already happens in Chrome and Internet Explorer, it is very likely that if your website works in these browsers, it will work equally well in Firefox with mixed content blocking.
References
Mixed Content Blocking Enabled in Firefox 23
I have flash object(video). And i want to open a page while on click on it. I have done it by taking it inside a div and on click of div i open the page. But its not working in chrome and IE. Its working fine in Firefox. My code is as below:
<div class="HouseImage" onclick="window.open('Contact','_self')" style="height: 300px;
overflow: hidden;">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="351"
height="332">
<param name="movie" value="Flash/Banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flash/Banner.swf" width="351"
height="332">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>
Content on this page requires a newer version of Adobe Flash Player.</h4>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
Please help me as soon as possible. Thanks in advance.
The best way is to open link via flash. If you don't have access to code you could write "special" flash loader, which would load Flash/Banner.swf inside itself, and have onclick event to load page.
You can also try putting transparent div or gif above flash animation, but it's a mess involving absolute positioning and it probably doesn't work on all browsers.
The Flex Application is set to 900 pixels width.
The object tag is set to 900 pixels width.
Firefox is rendering the object at 110% the size requested. So there is a blank vertical column on the right size of the object. (It does this if I set fixed height also)
If I set the width in the object tag to 810, then they match up, but thats too much of a hack for me to use.
Here is the object tag.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlashID" title="userlist">
<param name="movie" value="swf/userlist.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/userlist.swf" width="100%" height="100%" >
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
I think this happens because of the outer <object> tag which doesn't do anything useful in FF anyway. You can easily verify this theory by omitting it for testing. If I'm correct, I suggest you use SWFObject to render the embedding code. Alternatively, you could add some CSS trickery to hide that border in FF.
The comments in the code say why that outer object tag is needed. It is there for Internet Explorer.