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.
Related
I am generating the favicon programatically from ASP.NET using C# which works fine in all browsers except for Chrome.
I'm passing the page to the method SetFavIcon and setting it using HtmlLink class which is forms part of the System.Web.UI.HtmlControls namespace. This is how I'm doing it;
public static void SetFavIcon(Page p)
{
HtmlLink link = new HtmlLink();
link.Attributes.Add("type", "image/'x-icon");
link.Attributes.Add("rel", "shortcut icon");
link.Attributes.Add("href", HttpContext.Current.Request.Url.Authority + "/_graphics/_icons/favicon.ico");
p.Header.Controls.Add(link);
}
I've tried several options such as changing the type, adding a query string after favicon.ico but can't figure out why it is only happening in Chrome (works fine in Internet Explorer, Mozilla Firefox, and Microsoft Edge).
I'm testing on the latest version of Google Chrome - Version 49.0.2623.112 m
Check the whole <head> section of your page and look for non-header markups (div, p, etc.). For example:
<html>
<head>
<title>My page</title>
<div>This div has nothing to do here!!</div>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
...
</body>
</html>
Unlike Firefox or IE, when Chrome encounters a non-header markup in the header, it considers it to be over and supposes this is the beginning of the body. And because the link markup is not body-related, Chrome simply ignores all links that appear after the faulty non-header markup. So in the example above, the title works (it is before the div) but not the link.
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>
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!
I have a web page, I want to detect whether it's running on mobile safari on an ipad. If so, it should load different css files (and if it is running on websheet then it should load another css).
I am using following way for handling css but it shows only one for both:
<link rel="stylesheet" href="main.css?v=2">
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">
Are you using a programming language to dynamically generate pages? If so, you can use user-agent sent by browser and according to it, decide which css to include.
Example:
<script type="text/javascript">
$("#btn_load_css").click(function(){
var w = screen.width;
var h = screen.height;
$(document).append("<link rel='stylesheet' "
+" href='css/defaults.css.php?w="+w+"&h="+h+"' />");
});
</script>
This will cause the css to load at the end of the file.
If your main concern is the viewport size simply use media queries.
See MDN for an easier explanation and some examples.
I am trying to use Google Custom Search (Business Edition) on my site. I am not using the iFrame but I am using the Custom Element. I selected a theme and everything looks fine in all the browsers except IE6. All the search results are taking the Promotion CSS.
Update - Posted Code
<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXX');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setSearchFormRoot('cse-search-form');
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/minimalist.css" type="text/css" />
<div id="cse" style="width:100%;"></div>
I have solved the issue. The issue was with CSS that Google provides. They no longer support IE6 and infact do not have the browser installed anywhere to test (or so I've been told).
The issue is with IE6 and its inability to support multiple classes. Have a look at Ryan Brill's post for more information. To get the Google Custom Search CSS to work with IE6, the CSS selectors have to be tweaked a bit.
Ex: div.gs-promotion{ } instead of .cse .gs-promotion.gs-result, .gs-promotion.gs-result{ }