使用 onClick 函数将视频帧从 jPlayer 扩展到全屏

Question

功能：

用户可以从主菜单访问视频页面。视频会自动播放，此时视频不是全屏，为了美观起见，视频框中没有控制按钮。

其次，当用户点击视频时，它会显示为全屏，当用户点击全屏视频时，视频将退出全屏并恢复为原始视频帧大小.

已完成：

我使用 jQuery .jPlayer 创建了视频帧。并且在加载视频页面时自动播放视频。

我已附上以下代码：

function Footprints() {
  console.log("Footprints");
  
  //Main video player for video page 
  $("#Footprints_1").jPlayer({
    ready: function() {},
    swfPath: "javascript",
    supplied: "webmv, ogv, m4v",
    loop: true,
    size: {
      width: 1450,
      height: 750
    }
  }).bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
    $(this).jPlayer("pauseOthers");
  });
  $("#Footprints_1").jPlayer("setMedia", {
    //set m4v tag to array Footprints VideoList
    m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v"
  }).jPlayer("play");
  $("#Footprints_1").show();


  $("Footprints_1").click(function() {
    console.log("fullscreen")
    $("#Footprints_1").requestFullscreen();
  })
}

<div id="Footprints_Page" align="center" style="position:absolute; background-repeat: no-repeat; display: none; top:0px; left:0px; ">

  <!--Video Player-->
  <div id="Footprints_1" style="position:absolute; top: 180px;"></div>

</div>

因此，当您运行代码时，它显示为：

问题：

此时，当我在播放视频时点击视频帧时，没有任何反应。视频不会扩展到全屏。

因此，我如何才能在点击视频时将视频展开为全屏，并在点击视频时恢复到原始大小。

谢谢。

Answer 1

您目前正在处理两个三个问题。首先是你没有使用 jplayer 的事件系统。这就是点击次数被忽略的原因。我在您的 jplayer decleration 中添加了一个 bind.click，点击响应。

.bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    $("#Footprints_1").requestFullscreen();
});

见this Fiddle。

第二个问题是您在 jQuery 对象上调用 requestFullscreen()。它不是 jQuery API 的一部分。您需要在 HTML 元素上调用它。

document.getElementById("jp_video_0").requestFullscreen();

所以，上面的例子大概应该是：（未测试）

.bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    document.getElementById("jp_video_0").requestFullscreen();
});

如果您想对填充和放置进行一些控制，请在容器上请求全屏，您可以使用 CSS。

 document.getElementById("Footprints_1").requestFullscreen();

然而，第三个问题是，并非所有浏览器似乎都使用相同的方法requestFullscreen()。 See Mozilla docs。对我来说，以下工作在 Chrome:

.bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    var elem = document.getElementById("Footprints_1");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
})

This Post 从 jQuery 获得更多关于全屏的信息以及关于 x-browser 问题的信息。

希望对您有所帮助。

编辑： jsFiddle 无法演示全屏 API，因为我无法将所需的 'AllowFullscreen' 属性添加到他们的 iframe。如果您查看 jsFiddle 结果的框架源，您可以将其保存为 HTML 文档，它应该可以工作。

使用 onClick 函数将视频帧从 jPlayer 扩展到全屏

Extending video frame to full-screen from jPlayer using onClick function

javascript

video

jquery

onclick

jplayer