Question

功能

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

其次，当用户点击视频时，它将显示为全屏，当用户点击全屏视频时，视频将退出整个屏幕并恢复为原始视频帧尺寸。< / p>

已完成的工作：

我使用jQuery .jPlayer创建了视频帧。视频页面加载后，视频会自动播放。

我附上了以下代码：

＆＃13;

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();
  })
}

＆＃13;

<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>

＆＃13;

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

问题：

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

因此，当我点击视频时，如何将视频扩展为全屏，并且当点击视频时，它将恢复为原始大小。

感谢。

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浏览器问题的信息。

希望它有所帮助。

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

使用onClick功能将视频帧从jPlayer扩展到全屏

1 个答案: