Question

我有一个使用MediaElement JS和一些自定义jQuery开发的视频幻灯片播放器。

除了一件事之外，关于玩家的一切都很有效，并且完全符合我的需要。

在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&amp;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文件。

Mediaelement全屏Flash后备无法在IE7或IE8中进行缩放

0 个答案: