视频想要铺满整个页面,只设置宽高100%是没有效果的,需要加上下面样式即可实现:
object-fit: fill;
video视频属性:
src | 需要引入的视频资源地址 |
controls | 是否显示视频的控件,比如播放暂停进度条音量全屏等。 |
autoplay | 在视频就绪后马上播放。跟muted搭配使用,否则可能不能自动播放。 |
muted | 视频的音频为静音。 |
loop | 当视频完成播放后再次开始播放 |
poster | 预览图片,指定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像 |
volume | 视频的音量 0~1 |
duration | 视频的总时长 |
currentTime | 当前播放的进度 |
paused | 当前视频的状态是否暂停 暂停true |
width | 设置宽度 |
height | 设置高度 |
扫描二维码关注公众号,回复:
14954576 查看本文章
dd
使用方法
play() 播放
pause() 暂停
load() 重新加载当前视频
使用示例如下:
HTML
<progress value="50" max="100"></progress>
<input type="number">
<video src="./videos.mp4" controls></video>
<div class="btns">
<button>播放</button>
<button>暂停</button>
<button>快进</button>
<button>快退</button>
<button>快倍速</button>
<button>慢倍速</button>
</div>
<div class="play">
<button id="play">播放</button>
<button id="progress">获得播放百分比</button>
</div>
<div class="showprogress"></div>
JS
//获取视频
var video=document.getElementsByTagName('video')[0];
//获取音频
var btns=document.getElementsByClassName('btns')[0];
console.log(btns);
//判断按钮的文本内容、绑定事件
btns.onclick=function(){
//4.获取按钮内的事件 因为这里产生了点击 所以有点击事件
var text=event.target.innerText;
if(text == '播放'){
// console.log(video.volume); // 视频的音量
// console.log(video.duration); //视频的总长度
// console.log(video.cuttertTime); //视频当前播放的时长
// console.log(video.paused); //视频当前播放状态 true为暂停
video.play()
}
if(text == '暂停'){
video.pause()
}
if(text == '快进'){
video.currentTime +=10
video.play()
}
if(text == '快退'){
video.currentTime -=10
video.play()
}
if(text == '快倍速'){
console.log(video.playbackRate);
video.playbackRate *= 1.8
video.play()
}
if(text == '慢倍速'){
video.playbackRate *= 0.5
video.play()
}
}
//同一个按钮实现暂停播放
var play_btn = document.getElementById('play')
play_btn.onclick = function(){
if(video.paused){ //判断视频播放状态 true为暂停
video.play()
play_btn.innerText = '暂停'
}else{
video.pause()
play_btn.innerText = '播放'
}
}
// 获得播放的百分比
var progress = document.getElementById('progress')
progress.onclick= function(){
var total = video.duration
var current = video.currentTime
var res = (current/total*100).toFixed(2) +'%'
console.log(res);
//将百分比存入div
var showprogress = document.getElementsByClassName('showprogress')[0]
showprogress.innerText = res
}
audio音频
audio元素和video类似,是用来播放音频的。其属性方法事件也几乎与video元素一致
<audio src="./1.mp3" ></audio>
视频video音频audio监听事件
let audio = document.getElementById("audio");
// 音频不循环播放
audio.loop = false;
// addEventListener:
// true - 事件句柄在捕获阶段执行
// false - 默认。事件句柄在冒泡阶段执行
audio.addEventListener('loadstart', function () {
console.log("客户端开始请求数据");
}, false);
audio.addEventListener('progress', function () {
console.log("客户端正在请求数据");
}, false);
audio.addEventListener('error', function () {
console.log("请求数据时遇到错误 ");
}, false);
audio.addEventListener('stalled', function () {
console.log("网速失速 ");
}, false);
audio.addEventListener('play', function () {
console.log("play()和autoplay开始播放时触发 ");
}, false);
audio.addEventListener('pause', function () {
console.log("暂停触发");
}, false);
audio.addEventListener('loadedmetadata', function () {
console.log("当指定的音频/视频的元数据已加载时");
}, false);
audio.addEventListener('loadeddata', function () {
console.log("当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。");
}, false);
audio.addEventListener('waiting', function () {
console.log("等待数据,并非错误");
}, false);
audio.addEventListener('playing', function () {
console.log("正在播放时触发。");
}, false);
audio.addEventListener('canplay', function () {
console.log("可以播放,但中途可能因为加载而暂停");
}, false);
audio.addEventListener('canplaythrough', function () {
console.log("可以播放,歌曲全部加载完毕");
}, false);
audio.addEventListener('seeking', function () {
console.log("当用户开始移动/跳跃到音频/视频中的新位置时");
}, false);
audio.addEventListener('seeked', function () {
console.log("当用户已移动/跳跃到音频/视频中的新位置时");
}, false);
audio.addEventListener('timeupdate', function () {
console.log("播放时间改变");
}, false);
audio.addEventListener('ended', function () {
console.log("播放结束");
}, false);
audio.addEventListener('ratechange', function () {
console.log("播放速率改变");
}, false);
audio.addEventListener('durationchange', function () {
console.log("资源长度改变");
}, false);
audio.addEventListener('volumechange', function () {
console.log("音量改变");
}, false);