javascript – 请求全屏HTML5视频onPlay

2019-10-06 23:36:21 阅读：130 来源： 互联网

标签：javascript jquery html5 html5-video fullscreen

当用户点击< video>上的播放按钮时,我正在使用以下代码触发全屏.元件：

var video = $("#video");
video.on('play', function(e){
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen();
    }
});

但是当我点击播放按钮时没有任何反应.

任何想法都是为什么？

编辑：这是我的HTML代码：

<video width="458" height="258" controls id='video' >
          <source src='<?= bloginfo('template_directory'); ?>/inc/pilot.mp4' type="video/mp4">
          <source src='<?= bloginfo('template_directory'); ?>/inc/pilot.ogv' type="video/ogg">
          <source src='<?= bloginfo('template_directory'); ?>/inc/pilot.webm' type="video/webm">
</video>

解决方法:

这里有几件事情：

首先,在您的代码中,视频是一个jQuery对象,而不是实际的视频元素.对于jQuery对象,您可以像这样引用它：

var actualVideo = video[0]; // (assuming '#video' actually exists)

其次,为了安全性和良好的用户体验,浏览器只允许您在用户触发的事件中触发全屏,例如“点击”.您访问后不能让每个网页都全屏显示,并且您可以使视频自动开始播放,这违反了该规则.

因此,另一种解决方案是在点击事件中请求全屏,如下所示：

var video = $("#video");
video.on('click', function(e){
    var vid = video[0];
    vid.play();
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }
});

理想情况下,你可能想要建立一个更完整的玩家ui,但这应该给你一般的想法.

标签：javascript,jquery,html5,html5-video,fullscreen
来源： https://codeday.me/bug/20191006/1863097.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 请求全屏HTML5视频onPlay