在 video.html 文件中添加一个 <div> 标签,其中包含一个 <video> 标签、文件选择器(<input type='file'/>)和两个按钮 设置外层 <div> 标签的样式为圆角矩形、黑色背景和边框阴影,而文件选择(<input type='file'/>)和两个按钮设置为绝对定位,定位在外层 <div> 标签的底部 添加 <script> 标签,实现文件选择器的 change 事件处理程序。先获取选中的文件,再创建 FileReader对象,并通过 readAsDataURL() 方法加载文件,最后在 FileReader 对象的 load 事件中获得 video 对象,并加载视频内容。然后分别实现播放按钮事件处理和全屏按钮事件处理
时间: 2024-02-18 13:06:24 浏览: 82
好的,我明白了您的要求。以下是您需要添加到video.html文件中的代码:
```html
<div id="videoContainer">
<video id="myVideo"></video>
<input type="file" id="fileInput">
<button id="playBtn">播放</button>
<button id="fullscreenBtn">全屏</button>
</div>
<script>
const video = document.getElementById('myVideo');
const fileInput = document.getElementById('fileInput');
const playBtn = document.getElementById('playBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');
const videoContainer = document.getElementById('videoContainer');
// 设置样式
videoContainer.style.borderRadius = '10px';
videoContainer.style.backgroundColor = 'black';
videoContainer.style.boxShadow = '0px 0px 10px 0px rgba(0,0,0,0.75)';
fileInput.style.position = 'absolute';
playBtn.style.position = 'absolute';
fullscreenBtn.style.position = 'absolute';
fileInput.style.bottom = '0';
playBtn.style.bottom = '0';
fullscreenBtn.style.bottom = '0';
playBtn.style.left = '20px';
fullscreenBtn.style.right = '20px';
// 文件选择器事件处理程序
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
video.src = reader.result;
}
});
// 播放按钮事件处理程序
playBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playBtn.textContent = '暂停';
} else {
video.pause();
playBtn.textContent = '播放';
}
});
// 全屏按钮事件处理程序
fullscreenBtn.addEventListener('click', () => {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
});
</script>
```
这段代码会添加一个包含视频、文件选择器和两个按钮的div,以及样式和事件处理程序。您可以根据需要更改样式或修改事件处理程序。
阅读全文