MediaElement JS といくつかのカスタム jQuery を使用して開発したビデオ スライド プレーヤーがあります。
プレーヤーに関するすべてがうまく機能し、1 つのことを除いて、私が必要としていたことを正確に実行します。
IE7 および IE8 でフラッシュ フォールバックを使用すると、フラッシュ フォールバックを使用するたびに全画面表示になりますが、ビデオは拡大縮小されません。同じサイズのままで、大きな黒い背景になります。
ビデオのテキストの一部を読むには全画面表示機能が重要であるため、これは本当に問題です。誰もこれに遭遇したことがありますか?
私が使用しているコードは次のとおりです。
<video id="slide-video" src="/Slides/1.mp4" controls="controls" width="565" height="425">
<object width="565" height="425" type="application/x-shockwave-flash" data="/js/flashmediaelement.swf">
<param name="movie" value="/js/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=/Slides/1." />
</object>
</video>
そして、これが私が使用しているJavaScriptです
<script type="text/javascript">
$('.scroll-pane').jScrollPane();
var autoPlay = true;
var currChapter = 1;
var currSlide = 1;
var player;
$(document).ready(function () {
player = new MediaElementPlayer('#slide-video', {
plugins: ['flash'],
pluginPath: '<%=SkinPath %>MediaElement/',
flashName: 'flashmediaelement.swf',
success: function (mediaElement, domObject) {
// add event listener
mediaElement.addEventListener('ended', videoEnded, false);
if ($.browser.msie && $.browser.version != '9.0' || $.browser.mozilla) {
if (autoPlay)
loadSlide(1, 1);
}
}
});
$('ul.chapter li img').bind('click', function () {
loadSlide($(this).attr('chapter'), $(this).attr('slide'));
});
if (!$.browser.msie && !$.browser.mozilla || $.browser.msie && $.browser.version == '9.0') {
if (autoPlay) {
loadSlide(1, 1);
}
}
});
function videoEnded() {
var nextSlide = parseInt(currSlide) + 1;
if ($('img[chapter=' + currChapter + '][slide=' + nextSlide + ']').length == 0) {
currChapter++;
//nextSlide = 1;
}
currSlide++;
if ($('img[chapter=' + currChapter + '][slide=' + nextSlide + ']').length > 0) {
loadSlide(currChapter, nextSlide);
}
}
function videoPrev() {
var nextSlide = parseInt(currSlide) - 1;
if ($('img[chapter=' + currChapter + '][slide=' + nextSlide + ']').length == 0) {
currChapter--;
//nextSlide = 1;
}
currSlide--;
if ($('img[chapter=' + currChapter + '][slide=' + nextSlide + ']').length > 0) {
loadSlide(currChapter, nextSlide);
}
}
function loadSlide(chapter,slide) {
currChapter = chapter;
currSlide = slide;
$('.current-slide').text(slide);
$('.slide-text-wrap div[slide]').hide();
$('div[slide=' + slide + '].slide-text').show();
var imageFile = $('img[chapter=' + chapter + '][slide=' + slide + ']').attr('src').replace('-thumb', '');
$('.slide-img img:first').attr('src', imageFile);
player.setSrc(imageFile.replace('.png', '.mp4'));
player.play();
}
私が見たプレーヤーの他のインスタンスで動作します。それ以外のすべての標準 JS および CSS ファイルを使用しています。