У меня была такая же проблема.Я сделал следующее, чтобы плакат работал в IE8 и IE9.
В html-файл добавьте изображение под видеоэлементом с постером в виде src:
<img id="video-poster" width="460px" height="260px" src="img/video_poster.jpg">
В css-файле добавьте:
#video-poster {position: absolute; z-index: 600; display: none;}`
Обратите внимание, что родитель должен иметь в css position: relative
В файле JS добавить:
/**
* 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));