Like this site
Pay attention to your address bar.
They reference two icon files:
This one is for IE that only understands ICO format.
<link rel="shortcut icon" href="http://img1.wolai.com/img/favicon.ico" />
This one is for good browsers. This is an animated GIF.
<link rel="icon" href="http://img1.wolai.com/img/favicon.gif" type="image/gif" />
It looks like their favicon is an animated gif. It didn't seem to be animating in Google Chrome (4.x stream), but it works in Firefox.
Related
I've got a site running aimed at touchscreens running Firefox (very specific I know, but it will hopefully help with a solution)
On the page in question, I've got a d3 map that I'm trying to enable pinch zooming for, however any pinch gesture is causing Firefox to set the zoom for the whole page. Is there a way to prevent the page zooming and only allow the map to zoom?
It's not an issue if I have to modify Firefox config settings but I'd prefer to avoid it and rely entirely on javascript if possible.
Thank you in advance
You might be able to do this using the viewport metatag and Hammer.js
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
This will disable the default browser zoom.
You can then use Hammer.js to capture gesture events which you will then pass to your D3.js code to zoom your map
http://neeyamo.com/
the above website displays hidden layouts in ie8.
Which are meant to display only in low screen resolution.
i used "display:none" using css media query.
It works fine in other browsers.
But in IE8, it does not work.
may be you can use $("#idofdiv").hide() in jquery in document.ready()
Css media queries are not supported by IE8 but there are ways to get around IE7, IE8 support for css3 media query
Try something like
<!--[if lte IE 8]>
<style type="text/css" media="screen">
/*
.yourclass { display: none; }
</style>
<![endif]-->
I have VideoJS displaying a video in a modal window in a Wordpress website. I'm NOT using a videoJS plugin, I've loaded the latest VideoJS version to the home directory. The code for the video tag is in a separate non-Wordpress html file all on it's own.
The video IS working fine in Safari on the Mac, it's also working fine in Firefox on Windows. It is NOT working properly in Firefox on the Mac.
I have traced this issue back to it being caused by the 'controls' option in the tag. As soon as I change the options to 'autoplay' and take out 'controls', the video plays perfectly well in Firefox and Safari on the Mac.
More specifically it appears to be the small timer (showing how much video has played) on the skin's slider.
The skin in Firefox is different that the one in Safari. The one in Safari is BLACK and displays the time to the left and right of the slider at the bottom of the player. The one in Firefox is GREY and has the time in a small raised box above the slider at the bottom of the player. It is this raised box that seems to be causing an issue with the video playing in Firefox. The video is only playing slowly on a strip just above the slider and only to the height of the timer box.
I have tried putting:
<script>
_V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>
right under the call to
<script src="http://vjs.zencdn.net/c/video.js"></script>
in the head of the Wordpress page that has the modal window displaying the separate html page containing the code.
That did NOT work; both Safari and Firefox still show the controls at the bottom of the player.
I also tried adding:
.vjs-default-skin .vjs-time-controls {display: none !important;}
to my WP theme's stylesheet. That did NOT work either.
QUESTION 1: Why is Firefox using a different skin for VideoJS than Safari? If I can get the same controller for Firefox (ie one without the raised time code box) then the video may play normally.
QUESTION 2: How can I limit the controls to show only the large centred play button without showing the controls at the bottom of the player? Again, not having the raised time code box may make the video display normally in Firefox.
QUESTION 3: All this came about because I discovered iPhone and iPad do not play videos with the autoplay setting. I had originally set the option for autoplay in the tag without 'controls', but because it wasn't working in iPad (just getting a black background to the video) I took out 'autoplay' and added the 'controls'. And that's when I noticed the problem in Firefox. So if I can't fix the issue with having controls in Firefox and it not working, is there a way to get round the black screen issue on the iPad and using 'autoplay' for Firefox without controls?
Please let me know if there's any other information you need.
You shouldn't need the code as it's all working; the problem only arises in Firefox on the Mac when I add 'controls' to the tag. And I'm sure this can be fixed by using a different skin or getting rid of the controls at the bottom of the video (well, I'm hoping that will fix it!).
BTW I'm using this in the head of my WP template
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
Oh, and Firefox is not falling back to the Flash Flowplayer, it's definitely playing the ogg file in the HTML5 video tag.
ctagney, thanks for taking the time to respond.
Question 1
Hmm, strange.
I have this in the header at the moment:
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
This is the code I have in the html page (I've replaced actual domain with ... as I don't want links to the site --- you can see the video on www. horizonyachtsgrenada .com/ new-yacht-sales-grenada/ at the top of the right-hand side bar:
<div style="margin:0; Padding:0;">
<video id="salesvideo" class="video-js vjs-default-skin" preload="auto" controls width="540" height="320"
poster="http://.../videos/horizon-dream-makers-splash.jpg"
data-setup="{}">
<source src="http://.../video/HORIZON_FINAL_HD.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://.../video/HORIZON_FINAL_HD.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="http://.../video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, 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="540" height="320" 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":[http://.../videos/horizon-dream-makers-splash.jpg", {"url": "http://.../video/HORIZON_FINAL_HD.mp4","autoPlay":true,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://.../videos/horizon-dream-makers-splash.jpg" width="540" height="320" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
</div>
Any ideas why it's not using the video.js?
Question 2
I've added that code to the page now, so hopefully once it's picking up video.js it will pick this up. I assume I won't need 'controls' in the video tag for this to work, is that correct?
Question 3
So, if I'm understanding your link correctly, I'm right in changing it from autoplay to having controls for it to work on the iPad and iPhone.
New issue:
It's not working in Chrome even though there is a webm version of the video! I'm beginning to go greyer ... just want the video to work now!! :(
Any help much appreciated.
Cheers,
Tracy
EDIT: BTW the video does play on Safari, Firefox, and Chrome on a different site (different server, different video code) so it's not the video itself causing an issue.
The players you're describing in firefox and safari sound like the native video players for each browser. In other words, you're not actually using video.js.
Question 1
Once you get it working, you'll notice that the players should look identical to one another in Safari and Firefox. Without seeing your code it's hard to say why your video.js player isn't getting initialized, but you need to do one of the following:
Include a data-setup='' tag in your video element, which you can use to specify options via a JSON value.
Have a separate script that calls _V_("video id", {}) once the page has loaded.
I recommend you use the second option since you have some additional setup to handle (see: below)
Question 2
The big play button you want is automatically hidden when controls are turned off, so you should just call it's show() method once the video player has been initialized.
<script>
_V_("example", {}, function() { this.bigPlayButton.show(); });
</script>
See the following for a working example.
http://jsbin.com/ijipag/2/edit
Question 3
See Can you autoplay HTML5 videos on the iPad?
The issue was I didn't include the call to the video.js
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
in the separate (non-WP) html page that's shown in the modal (FancyBox iframe) window. I've now included that and it's successfully calling the video.js and showing the big play button without the bottom controls in Safari and Firefox.
It's still NOT working in Chrome. In Chrome, when you click the play button it's just showing the poster image and the spinning loading gif.
UPDATE: Got it working in Chrome by moving :
<source src="http://www.horizonmotoryachts.com/video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, vorbis"' />
above the calls to the mpeg4 and ogg files.
Tested on Firefox and Safari on Mac and its still working.
I've tried everything but cannot get my client's website to scale on my iPhone 5.
smalldotdesign.com/clients/ops
<meta name="viewport" content="width=device-width, initial-scale=0.3, minimum-scale=0.25, maximum-scale=5.0, user-scalable=1;" />
This code is in the correct place in meta because the site is scaling automatically... but wont let me pinch zoom. Can anyone help me with this? I've tried everything I can find. I've been messing with it for an hour and looking at all the forums but they all say the same thing.
Any guidance would be much appreciated. The page will not zoom even when the meta tag is removed. Maybe there is something in the CSS that could cause this?
So I have been working on a site (http://getcours.tk/), recently, It works fine in Chrome (So webkit) and Firefox (So Gecko) but I just tried it out in Internet explorer 8 and Since it doesn't seem to follow CSS3 standards, It is incapable of rendering it properly.
I just want to display a message to users of internet explorer 8 and below (ie9 works) to say that the site will display incorrectly in their browser, and that if they wish to see it properly they should Use a Modern browser.
Really hoping for a hand here, thanks to anyone who can help
-jman6495
It's really simple actually. You can paste this anywhere in your page and everything inside it will only be rendered by IE8 and below
<!--[if lt IE 8]>
//Whatever you want here
//For example, specific css only for IE
<link rel="stylesheet" type="text/css" href="cssIE.css" />
<![endif]-->
Similarily you can use "gt" (greater than) instead of "lt" or any number version you want.