启动全屏视频" onclick"一个外部按钮

时间:2017-04-11 15:23:53

标签: javascript jquery html video-player

我是一个拥有自己视频的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()不是函数"

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

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