I've got a small problem - I have a HTML5 video om my site, it works fine in FF, Chrome, Safari. However, it only shows the video in IE if I set autoplay="autoplay". Somehow it doesn't show the poster img - You can see it here, http://test.jsworldmedia.com/ Just press See Video. Anyone know what is wrong?
The code is:
<video id="videoContainer" width="932" height="524" controls="controls" poster="/media/13037/big_buck_bunny_poster.jpg">
<source src="http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://test.jsworldmedia.com/media/13555/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://test.jsworldmedia.com/media/13034/big_buck_bunny.webm" type="video/webm" />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="932" height="524" 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://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg', {'url': 'http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4','autoPlay':false,'autoBuffering':true}]}" />
<img src="http://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg" width="932" height="542" alt="" title="No video playback capabilities." />
</object>
</video>
IE9 overwrites the poster image if some of the video is loaded, which is the default. If you add the attribute preload="none" the poster image will work in IE9.
Not ideal.
edit
I've written about this and have also filed a bug report with the W3C as I think that it needs to be changed.
I have found the poster attribute to be too inconsistent. For me, preload="none" only fixed the IE 9 problem.
You are better off editing your video so that the poster image is the first frame of your video.
I am a big fan of this Video for Everybody site which outlines exactly how one should implement the html5 <video> tag with fallbacks. The author talks specifically about the poster attribute, mentioning inconsistent support and a major bug in iOS 3.x as reasons to encode the poster image into the first frame of your video.
You can also check out VideoJs which will handle many of the cross browser issues.
EDIT (2012-11-04): VideoJs may not be a good option, major issues reported with IE 9.
I had the same issue. I did the following to have the poster working in IE8 and IE9.
In html file add an image bellow the video element with the poster as src:
<img id="video-poster" width="460px" height="260px" src="img/video_poster.jpg">
In css file add:
#video-poster {position: absolute; z-index: 600; display: none;}`
Note that the parent need to have in css position: relative
In JS file add:
/**
* fix the following issue: "video preview not showing properly on IE8 and IE9"
*/
(function ($) {
var browserIEInfo = navigator.userAgent.match(/MSIE (([0-9]+)(\.[0-9]+)?)/);
if (browserIEInfo === null || parseInt(browserIEInfo[2]) > 9){
return;
}
if (parseInt(browserIEInfo[2]) < 9 && !isFlashSupported()) {
return;
}
var video = $('video'); // use element id if there is more than 1 video
var videoPoster = $('#video-poster');
$( window ).resize(function() {
fixVideoCoverPosition();
});
fixVideoCoverPosition();
videoPoster.show();
videoPoster.click(function() {
video.get(0).play()
});
video.on('playing', function() {
videoPoster.hide();
});
video.on('ended', function() {
videoPoster.show();
});
function isFlashSupported() {
var hasFlash = false;
try {
new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
} catch (e) {
var mimeTypes = navigator.mimeTypes;
if (mimeTypes
&& mimeTypes['application/x-shockwave-flash'] !== undefined
&& mimeTypes['application/x-shockwave-flash']['enabledPlugin']
) {
hasFlash = true;
}
}
return hasFlash;
}
function fixVideoCoverPosition() {
var videoPosition = video.position();
video.width();
$('#video-poster').css({
top: videoPosition.top,
left: videoPosition.left,
width: video.width(),
height: video.height()
});
}
}(jQuery));
Related
All the image slider plugins I have used so far for Wordpress sites have had no way, as far as I could tell, to swap out different sized images at various screen sizes to enable an 'mobile first' experience.
For example: http://www.akqa.com/
They have changed which image is displayed depending on certain breakpoints and it allows control over which part of the image is displayed.
If there is no plugin to automate this, could it at least be achieved through CSS alone?
Thank you
You can do this by HTML picture tag or Jquery .data()
Jquery Example
orignalImg = $(".test").attr("src"); // get orignal image
mobileImg = $(".test").data("mobile"); // get mobile image
brakpoint = 768; //what ever your brakpoint
//do magic
function changeImg() {
$(".test").each(function() {
if ($(window).width() <= brakpoint) {
$(this).attr("src", mobileImg);
}else {
$(this).attr("src", orignalImg);
}
});
}
// call magic
changeImg();
//change image if viewport change
$(window).on('resize', function() {
changeImg()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Resize your window </h1>
<img class="test" src="http://placehold.it/600x300" data-mobile="http://placehold.it/300x600">
HTML Example
<picture>
<source srcset="http://placehold.it/600x300" media="(min-width:768px)">
<img src="http://placehold.it/300x600" alt="img">
</picture>
In your example link they are also using this <picture> tag. This is a simple solution but might be you will face browser compatibility issue
On HTML page the video is put, I want to make such kind of task that shows seen videos blur and if we refresh page it will get normal without any overlay i wan to put css or java script for that.
Using JS, add a class to the video once its been watched:
.video--watched {
-webkit-filter: blur(20px);
filter: blur(20px);
}
I am assuming we are talking about a <video> tag.
It depends on what you mean be seen once. Do you mean if the video has ended or if the video has started playing.
JavaScript has methods for detecting whether the video has started or ended.
Here is an example. Let's say you have a list of videos
<video id="my-video">
<source src="movie1.mp4" type="video/mp4">
</video>
<video id="video2">
<source src="movie1.mp4" type="video/mp4">
</video>
var videos = document.getElementsByTagName("video");
for (var i = 0; i < videos.length; i++) {
videos[i].onended = function() {
video.style.opacity = 0.5;
});
}
Alternatively you can add inline event-attributes like so
<video id="my-video" onended="blurVideo()">
I am working with a client. Their webpage is using this DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I need to deliver content to pages on their site. My content looks like this
<div style="height:1000px">
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
<br/>
<br/>
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
</div>
I can place the content on the clients page by giving them a couple of lines of css, and, currently, and iframe:
<style>
.iframecontent
{
background-color:blue;
position: relative;
height: 100%;
width: 100%
}
</style>
<iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"> </iframe>
Because the height of the content is dynamic, I cannot provide a specific height to the client - instead I need it to stretch.
I've read many posts, but am still not sure of the best way to do this. Possibly CORS? Something else?
Here is one solution offered: http://sly777.github.com/Iframe-Height-Jquery-Plugin/ - it works on the same domain, but for cross-domain talk it relies on PostMessage which is an HTML 5 thing.
I've tried http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/ but have not be able to get it to work.
I might just get the client to set the frame to 1500px so that it should fit whatever I choose to be in the content and be done with it, but is there a better way?
Could you just set the html,body{height:100%;} then your iframe{height:100%}?
A percentage height is directly dependant on it's parent's height (of a block element). ie: iframe is 100% of what? In this case, it's parent is the body.
You may use the postMessage Plugin http://benalman.com/projects/jquery-postmessage-plugin/
It enables you to post messages from inside an iframe to the parent element. In combination the the setInterval javascript function you may send the current needed size to the parent element.
Inside the iframe
var currentIframeSize = 0;
window.setInterval(function() {
var size = $('body').outerHeight(true);
//just post, if the size has changed
if ( currentIframeSize != size ){
currentIframeSize = size;
$.postMessage({if_height : size}, source_url, parent);
}
}, 1000); //do that every second
In the head section of the parent element
id = "theIdOfYourIframe";
$.receiveMessage(function(e){
var rec_height = Number( e.data.replace( /.*if_height=(\d+)(?:&|$)/, '$1' ) );
if ( !isNaN( rec_height ) && rec_height > 0 && rec_height !== current_height ) {
current_height = rec_height;
$('#' + id).height(rec_height);
}
});
Based on those two snippets, you should get your problem solved
I updated my plugin that you tried (http://sly777.github.com/Iframe-Height-Jquery-Plugin/) and i added tutorial how to use this plugin for cross-domain fix. I hope it helps.
I'm trying to embed an HD YouTube video but no matter what I try, it only ever seems to load the 480p version.
According to YouTube, embedding an HD video is as simple as adding hd=1 to the URL:
<iframe src="//www.youtube.com/embed/{videoId}?hd=1" width="960" height="720" frameborder="0" allowfullscreen></iframe>
This, however, does not seem to be working, at least in my implementation of the iframe:
<iframe id="video-player" width="960" height="720" src="//www.youtube.com/embed/{videoId}?enablejsapi=1&autoplay=1&rel=0&modestbranding=1&showinfo=0&showsearch=0" frameborder="0" allowfullscreen></iframe>
The same is true with the Javascript API:
HTML:
<div id="video-player"></div>
JS:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video-player', {
height: '720',
width: '960',
videoId: '{videoId}',
playerVars: {
'controls': 1,
'autoplay': 1,
'hd': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
player.playVideo();
}
Use this parameter:
vq=hd1080
Example:
<iframe src="https://www.youtube-nocookie.com/embed/SzTdgE04uA8?vq=hd1080" width="853" height="480"></iframe>
As per this answer on the YouTube support forum:
[The iframe embed] will attempt to "optimize" the experience and will work off
of the dimensions of the embed player to choose what quality to play
it back at by default.
If the embed is much smaller than 1280x750, such as 853x510 or 640x390, it will play 480p or 360p, regardless of whether the &hd=1 parameter is set.
(Emphasis mine)
I changed the dimensions of the iframe to 1280x720 and the video loaded at 720p resolution.
So, basically the iframe embed mechanism is intelligent and only loads the closest resolution according to the size of the iframe.
There is a trick you can do. Set the quality via JS. Its not guaranteed, but works on my site (ggreplayz.com):
https://developers.google.com/youtube/js_api_reference#Playback_quality
Example:
<iframe id="vid2" style="z-index: 1;" width="853" height="505" src="http://www.youtube.com/embed/<?php echo $vid2Array[0];?>?enablejsapi=1&wmode=transparent&hd=1" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript">
...
function onYouTubePlayerAPIReady() {
player1 = new YT.Player('vid1', {
events: {
'onReady': onPlayerReady1
}
});
...
function onPlayerReady1(event) {
player1.setPlaybackQuality('hd720');
}
...
hd parameter has been deprecated: https://developers.google.com/youtube/player_parameters#Deprecated_Parameters
I use &hd=1&vq=hd720 for achieve that. It loads the 720p version even if the player is smaller. I got this information from this source.
I might be a little late, but I just discovered it only looks at the height of the video player.
When I try to embed a video 1000px wide, but only 408 pixels high (2.35:1 matte) it selects 360p >:|
After spending more than 5hrs searching and testing all the answers, the below code works for me.
Using Xcode 5, iOS 7.0.4 and iPad mini2.
- (void)viewWillAppear:(BOOL)animated
{
NSString *htmlString = #"<html><head>\
<meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = yes, height = 640px, width = 360px\"/></head>\
<body style=\"background:#000;margin-top:0px;margin-left:0px\">\
<iframe id=\"ytplayer\" type=\"text/html\" width=\"640px\" height=\"360px\"\
src=\"http://www.youtube.com/embed/%#?vq=hd1080\"\
frameborder=\"0\"/>\
</body></html>";
htmlString = [NSString stringWithFormat:htmlString,self.videoId, self.videoId];
[self.videoPlayerView loadHTMLString:htmlString baseURL:[NSURL URLWithString:#"http://www.youtube.com"]];
}
The only important thing here is the aspect ratio that you set in your iframe (" width=\"640px\" height=\"360px\"), which are basically the ratios of 1280*720. And then set the same size for your UIWebView.
Hope this help someone.
Mine wasn't working at all. I tried everything including all these parameters
&hd=1&vq=hd720&quality=high
But it didn't work until I added this parameter:
&version=3
I have a flowplayer that I am using with a few pictures below it. When you click on these pictures a dialog is created with an enlarged version of these pictures. The problem is the flowplayer will always be on top of the dialog.
I have tried setting the z-index of the dialog high and the flowplayer low, but it doesn't work.
Is there a method in flowplayer that will lower its z-index or allow for my dialog to be placed over it?
Edit Heres the flowplayer:
//Uses flowplayer to create player
$f('#rightVideoContent', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
//Creates a single clip for the flow player
clip: {
url: videoLocation,
autoPlay: true,
autoBuffering: true
},
plugins: {
controls: null
},
onLoad: function () {
//Do nothing here
}
});
And here is the div
<div id = "rightVideoContent" class = "VideoDiv"></div>
I use flowplayer-3.2.6.js as well
I think what you've missed is :
<param name="wmode" value="transparent" />
a bit more about wmode
edit: take a look at your code ... to embed a swf file you gotta have something like:
<object width="550" height="400">
<param name="movie" value="somefilename.swf" />
<embed src="somefilename.swf" width="550" height="400"></embed>
</object>
all you need to do is just add another <param ... after the first one
edit2: you should replace the second parameter ... instead of the url string put there
{src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf', wmode: 'transparent'}
You probably need to embed the flash with wmode="transparent".
As in #locrizak's answer, you can also use wmode="opaque", which is better because it's less processor intensive.
These should help:
http://flowplayer.org/forum/2/10645
http://flowplayer.org/documentation/configuration/player.html#embedding
You need a wmode: "transparent/opaque" parameter on the flash object.
I had trouble with this and Flowplayer wouldn't add the wmode parameter no matter what i tried
I used this jQuery snippet and it solved it!
$('#videocontainerid object').prepend('<param name="wmode" value="opaque">');
or for every object:
$('object').prepend('<param name="wmode" value="opaque">');
see HTML Overlays in Flowplayer
example code:
flowplayer("player", {
src:"http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf",
wmode: "opaque" // This allows the HTML to hide the flash content
}, {
clip: {
url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv'
}
});