启动全屏视频“onclick”外部按钮答案

【问题标题】：Launch fullscreen video "onclick" an external button启动全屏视频“onclick”外部按钮
【发布时间】：2017-04-11 15:23:53
【问题描述】：

我有一个带有我自己的视频的 html5 视频播放器。我希望当我点击一个按钮或一个图像（任何东西）时，我的播放器会显示（）并放大全屏，就像我点击控制按钮时一样。

我已经尝试过这个和其他常见的东西：

$(function () {
            $("h1").click(function () {
                $("#video-test").requestFullscreen();
                $("#video-test").msRequestFullscreen();
                $("#video-test").mozRequestFullscreen();
                $("#video-test").webkitRequestFullscreen();
                $("#video-test").addClass('fullscreen').html("&#61541");
                $("i").addClass('fullscreen').html("&#61541");
            });
        });

但它并没有给我任何回报。 “$(....).requestFullscreen() 不是函数”

有什么想法吗？

【问题讨论】：

非常相似stackoverflow.com/questions/15466174/…
jQuery 没有任何requestFullscreen 方法，这些方法用于native JavaScript
很抱歉，我“尝试了”您帖子中所说的内容，但由于我不明白它的相似之处 - 它是如何工作的，我无法为我做这件事。如果您可以更具体地解决我的问题（单击会产生全屏模式），那将是可观的:) 我在原生 JS 和视频播放器操作方面不是很好
可能只有requestFullscreen 变体之一，您必须测试哪一个可用并只使用那个。

标签： javascript jquery html video-player

【解决方案1】：

<video id="videoplay" controls="controls" autoplay="autoplay"> 
    <source src=small.mp4 type=video/mp4>
    <source src=small.3gp type=video/3gp>
    <source src=small.webm type=video/webm> 
    <source src=small.ogv type=video/ogg> 
</video>
<script type="text/javascript">
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
if (myVideo.paused) {
    if (myVideo.requestFullscreen) {
        myVideo.requestFullscreen();
    }
    else if (myVideo.msRequestFullscreen) {
        myVideo.msRequestFullscreen();
    }
    else if (myVideo.mozRequestFullScreen) {
        myVideo.mozRequestFullScreen();
    }
    else if (myVideo.webkitRequestFullScreen) {
        myVideo.webkitRequestFullScreen();
    }
    myVideo.play();
}
else {
    myVideo.pause();
}
}, false);
</script>

【讨论】：