2

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

关于播放器的一切都很好，并且完全按照我的需要做，除了一件事。

在 IE7 和 IE8 中，它使用 flash 后备，每当它使用 flash 后备时，它仍然会全屏显示，但视频不会缩放。它只是保持相同的尺寸并获得一个大的黑色背景。

这确实是一个问题，因为全屏功能对于阅读视频上的某些文字很重要。有没有人遇到过这个？

这是我正在使用的代码：

<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 文件。

4

0 回答 0