2

I've an html5 video player with my own video. I'd like that when I click on a button, or an image (anything), my player show() and enlarge fullscreen like when I click on the control button.

I've tried this and other common stuff :

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

But it doesn't return me anything. "$(....).requestFullscreen() is not a function"

Any idea ?

Tom Marchal
  • 31
  • 1
  • 2
  • Very similar http://stackoverflow.com/questions/15466174/html5-video-by-button-play-is-not-a-function – Musa Apr 11 '17 at 15:28
  • jQuery doesn't have any of those `requestFullscreen` methods, those are for [native JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen) – Kevin Jantzer Apr 11 '17 at 18:00
  • I'm sorry i "tried" what was said on your post but as I don't understand in what it's similar - how does it work, I can't manage to do it for me. If you can be a bit more specific with my problem (a click that engender a full screen mode) it would be appreciable :) I'm not very good in native JS and video player manipulation – Tom Marchal Apr 12 '17 at 12:39
  • There will probably be only one of the `requestFullscreen` variants, you'll have to test which one is available and use only that one. – Musa Apr 12 '17 at 17:14

1 Answers1

2
<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>
dhruvishamistry
  • 29
  • 3