如何全屏模式自定义视频播放器并在全屏打开时向下滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何全屏模式自定义视频播放器并在全屏打开时向下滚动相关的知识，希望对你有一定的参考价值。
我想问一个关于自定义视频播放器的独特创新问题。我现在拥有的是一个具有播放功能的自定义视频播放器，当按下暂停按钮时按钮将暂停，但缺少的是我想在单击播放按钮时查看全屏，最终输出应该看起来像YouTube视频全屏模式。
定制视频播放器：
在全屏模式下，可以在YouTube视频播放器中查看差异。
自定义视频播放器代码
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#video_player_box{ width:100%; background:#000; }
div#video_controls_bar{ background: #333; padding:10px; }
</style>
<script>
function playPause(btn, vid){
var vid = document.getElementById(vid);
if (vid.paused) {
vid.play();
btn.innerHTML = "Pause";
}else{
vid.pause();
btn.innerHTML = "Play";
}
}
</script>
</head>
<body>
<div id="video_player_box">
<video id="my_video" controls="controls" width="100%" height="320">
<source src="videoplayback.mp4">
</video>
<div id="video_controls_bar">
<button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button>
</div>
</div>
</body>
</html>
答案
尝试更新控制栏以在div上包含全屏请求：
<div id="video_controls_bar">
<button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button>
<button id="fs" onclick="document.getElementById('video_player_box').requestFullscreen();">Full Screen</button>
</div>
由于父div（video_player_box）是已全屏发送的元素，这意味着您现在可以控制播放器的大小，背景等，就像在页面上的div中一样
另一答案
请试试这段代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {margin:0;}
div#video_player_box{ width:100%; background:#000; }
div#video_controls_bar{ background: #333; padding:10px; }
</style>
<script>
function playPause(btn, vid){
var vid = document.getElementById(vid);
if (vid.paused) {
vid.play();
btn.innerHTML = "Pause";
}else{
vid.pause();
btn.innerHTML = "Play";
}
}
</script>
</head>
<body>
<div id="video_player_box">
<video id="my_video" controls="controls" width="100%" height="100%">
<source src="videoplayback.mp4">
</video>
<div id="video_controls_bar">
<button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button>
</div>
</div>
</body>
</html>
以上是关于如何全屏模式自定义视频播放器并在全屏打开时向下滚动的主要内容，如果未能解决你的问题，请参考以下文章
如何将 QVideoWidget 设置为全屏并在全屏小部件中有音量滑块？