【问题标题】:Video.js cancelFullScreen api method not working in FirefoxVideo.js cancelFullScreen api 方法在 Firefox 中不起作用
【发布时间】:2013-04-03 12:37:33
【问题描述】:

我正在使用video.js 构建自定义视频播放器。我想要在功能中构建的一件事是检查以确保如果视频在全屏模式下结束播放,它会恢复到正常模式。我认为使用video.js api 很容易实现。

在我的代码中,我正在侦听“结束”事件,然后在该事件的处理程序中触发 cancelFullScreen() 方法,这在 Chrome 中工作得非常好(它甚至可以在 IE 7/8 的闪存回退模式下工作),但它在 Firefox 19 中根本不起作用 - 窗口只是保持全屏模式。

有什么想法吗?

这是我的标记:

    <link rel="stylesheet" href="http://vjs.zencdn.net/3.2/video-js.css">
    <script src="http://vjs.zencdn.net/c/video.js"></script>

    <div class="vid_container" style="width: 934px; height: 524px; left: 0; top: 0;">
      <video id="video_NewMoon" controls   class="video-js vjs-default-skin" width="934" height="524" poster="/cms/arcadiacorp_uk/repository/pages/static/static-0000008447/images/poster.jpg" data-setup="{}">
        <source src="http://ecmcstg.arcadiagroup.ltd.uk/cms/arcadiacorp_uk/repository/pages/static/static-0000008447/flash/nailVid.mp4" type="video/mp4">
        <source src="http://ecmcstg.arcadiagroup.ltd.uk/cms/arcadiacorp_uk/repository/pages/static/static-0000008447/flash/nails.webm" type="video/webm">

        <a href="http://ecmcstg.arcadiagroup.ltd.uk/cms/arcadiacorp_uk/repository/pages/static/static-0000008447/flash/nailVid.mp4" title="Click here to download the video">Your browser cannot play this video, click here to download it instead.</a>
      </video>
    </div>

这是我的 js 代码,它位于结束 body 标记内:

var myPlayer = _V_("video_NewMoon");

var movEnded = function(){
    myPlayer.bigPlayButton.hide();
    myPlayer.loadingSpinner.hide();

    if(myPlayer.isFullScreen === true) {
        console.log("yep, we're fullscreen - lets shut this down");
        myPlayer.cancelFullScreen();
    }
};
myPlayer.addEvent("ended", movEnded);

我尝试了各种其他方法来解决它,例如在结束的处理程序中使用 jquery 触发 Esc 键,但这也不起作用。我现在对此已经没有耐心了。

哦,当我们讨论错误时,加载微调器在 Chrome 上显示但在 FF 中隐藏。老实说,我宁愿把它隐藏起来。

提前致谢。

【问题讨论】:

    标签: javascript html5-video fullscreen video.js


    【解决方案1】:

    根据http://caniuse.com/fullscreen,Firefox 部分支持全屏 API。

    【讨论】:

      猜你喜欢
      • 2011-10-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-10-19
      • 1970-01-01
      相关资源
      最近更新 更多