I'm looking to display a linked image to show when my video isn't compatible.
My code is as follows:
<video controls poster="/sites/default/files/image/CRM-Systems-Video.png">
<source src="/sites/default/files/image/CRM-Systems-Video.ogv" type="video/ogg">
<source src="/sites/default/files/image/CRM-Systems-Video.mp4" type="video/mp4">
<a href="http://content.workbooks.com/free-trial-workbooks-crm?utm_source=Homepage&utm_medium=laptopimage&utm_campaign=laptophomepage">
<img src="http://www.workbooks.com/sites/default/files/image/crm-system-image.png" title="CRM System image">
</a>
</video>
However when I use Browser Stack to test IE8 (non compatible with <video>) no image is shown? Is this due to the link?
Browser shots link: http://www.browserstack.com/screenshots/663ccadc9d1c2a3aa880fb4e1ef111c4eb386c79
Adding the following to the start of your <head> will do it:
<script type="text/javascript">
document.createElement("video");
</script>
This tricks IE8 into recognising the <video> element, as IE does not display any tags it does not recognise. I tested this and the link appeared, although <source> files are ignored.
Heres an example (you should see nothing on modern browsers, but browsers lacking video support will display a text):
<script type="text/javascript">
document.createElement("video");
</script>
<video>
You are on an older browser
</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" />
I have an asp.net MVC 4 controller that provides the mp4,
public ActionResult GetVideoForEvent(int eventId)
{
var videoPath = "pathToVideo";
var videoFileInfo = new FileInfo(videoPath);
return new RangeFilePathResult("video/mp4", videoFileInfo.FullName, videoFileInfo.LastWriteTimeUtc, videoFileInfo.Length);
}
And a video player in a partial view,
#model int
<link href="https://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/c/video.js"></script>
<video class="video-js vjs-default-skin" controls autoplay preload="none" width="320" height="256" data-setup="{}" >
<source type="video/mp4" src="#Url.Action("GetVideoForEvent", new { eventId = Model})">
</video>
This works for ie8 and ie10 but not ie9.
The problem only occurs when using videojs, if I used the just the html5 <video> the video plays.
Also if I change the source to be a direct link to a file on iis, the video plays.
Output from ie9 console:
LOG:
LOG: Video Error[object Object]
What is causing the error when using videojs and how can I fix it?
I have found a workaround. By only using videojs if the browser is ie 8, the video plays on ie8, 9, 10 and Google chrome.
The video player does look different on each browser though.
<!--[if lt IE 9]>
<link href="https://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/c/video.js"></script>
<![endif]-->
I had the same problem. Check your MIME types for mp4 files are correct and that the video is encoded correctly.
I found the debugging guide on this website to be very helpful.
I am trying to style a audio player that generates when the user clicks a music file.
In developer tool in chrome, the structure is like the following
<embed src='music.wav' >
#document
<html>
<body>
<video controls autoplay name='media'>
<source src='music.wav' type='audio/x-wav'>
</video>
<body>
<html>
</embed>
How do I style the video player that chrome generated in this case?? Thanks a lot!
<object id="page" type="text/html"
data="index_test.html"
width="565" height="500">
<p>Oops! That didn't work...</p>
</object>
This is what I have and works in Firefox, but IE7 has scrollbars. How do I get rid of them?
As much as it pains me to recommend it, render scroll="no" on the <body> tag. This will eliminate the default scrollbars in IE7. IE8 and other standard browsers can mark overflow:auto on the CSS for the body tag without needing scroll="no"
To clarify, add scroll="no" on the body tag in your index_test.html