js代码实现视频播放
使用HTML5 Video元素
在HTML中嵌入<video>标签，通过JavaScript控制播放。以下是一个基础实现示例：
<video id="myVideo" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script>
const video = document.getElementById('myVideo');
// 播放
video.play();
// 暂停
video.pause();
// 跳转到特定时间（秒）
video.currentTime = 10;
</script>自定义播放器控件
通过JavaScript完全自定义UI控件：
<div>
<video id="customVideo" src="video.mp4"></video>
<button id="playBtn">播放</button>
<input type="range" id="progressBar" value="0">
</div>
<script>
const vid = document.getElementById('customVideo');
const playBtn = document.getElementById('playBtn');
const progressBar = document.getElementById('progressBar');
playBtn.addEventListener('click', () => {
vid.paused ? vid.play() : vid.pause();
});
vid.addEventListener('timeupdate', () => {
progressBar.value = (vid.currentTime / vid.duration) * 100;
});
progressBar.addEventListener('input', () => {
vid.currentTime = (progressBar.value / 100) * vid.duration;
});
</script>使用第三方库（如Video.js）
对于更复杂的功能（如自适应流、跨浏览器支持），可使用专业库：
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet">
<video id="enhancedVideo" class="video-js" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script src="https://vjs.zencdn.net/7.20.3/video.js"></script>
<script>
const player = videojs('enhancedVideo');
player.ready(() => {
player.play();
});
</script>处理全屏模式
通过Fullscreen API实现全屏控制：
const videoElem = document.getElementById("myVideo");
// 进入全屏
videoElem.requestFullscreen().catch(err => {
console.error(`全屏错误: ${err.message}`);
});
// 退出全屏
document.exitFullscreen();事件监听
处理关键视频事件：
video.addEventListener('loadedmetadata', () => {
console.log('视频时长:', video.duration);
});
video.addEventListener('ended', () => {
console.log('播放结束');
});
video.addEventListener('error', () => {
console.error('加载错误:', video.error.message);
});移动端自动播放处理
iOS等平台限制自动播放，需用户交互触发：
document.body.addEventListener('click', () => {
video.play().catch(e => {
console.log('自动播放被阻止，显示播放按钮');
});
}, { once: true });
