Jquery HTML控件在全屏显示时自动出现
我有一个视频在我的html代码Jquery HTML控件在全屏显示时自动出现,jquery,html,css,Jquery,Html,Css,我有一个视频在我的html代码 <video width="100%" class="posted_vid"> <source src="uploaded_videos/<?php echo $Video; ?>"> </video> <div class="video_controls">
<video width="100%" class="posted_vid">
<source src="uploaded_videos/<?php echo $Video; ?>">
</video>
<div class="video_controls">
<input type="range" id="font-1-size" value="0" class="video_range" min="0"><br>
<img src="img/playicon.png" class="play_button">
<img src="img/pauseicon.png" class="pause_button">
<img src="img/volumeicon.png" class="volume_button">
<input type="range" min="0" max="1" step="0.1" class="volume">
<span class="cur_time current_min">0:</span><span class="cur_time current_seconds">00</span>
<span class="duration">0:00</span>
<img title="Fullscreen" src="img/fullscreen.png" class="fullscreen_vid">
</div>
$("body").on('click', '.fullscreen_vid', function(event) {
var vid = $(this).parent().siblings('.posted_vid')[0];
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
不要将视频设置为全屏。全屏设置包含视频和自定义控件的DOM节点
<div id="container">
<video width="100%" class="posted_vid">
<source src="uploaded_videos/<?php echo $Video; ?>">
</video>
<div class="video_controls">
<input type="range" id="font-1-size" value="0" class="video_range" min="0"><br>
<img src="img/playicon.png" class="play_button">
<img src="img/pauseicon.png" class="pause_button">
<img src="img/volumeicon.png" class="volume_button">
<input type="range" min="0" max="1" step="0.1" class="volume">
<span class="cur_time current_min">0:</span><span class="cur_time current_seconds">00</span>
<span class="duration">0:00</span>
<img title="Fullscreen" src="img/fullscreen.png" class="fullscreen_vid">
</div>
</div>
您创建的控制器在DOM中的什么位置?大概不是在你切换到全屏模式的元素里面…?@CBroe我加上了控制器谢谢你的帮助,同时用这些有用的信息丰富了我的无限小的大脑。
$("body").on('click', '.fullscreen_vid', function(event) {
var vid = $('#container'); // <------ this
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});