目录前言浏览器中的音视频知识总结视频编码封装格式音视频标签常用属性常用事件常用方法整体思路如下代码实现总结前言 自定义个播放器,组件都是用的原生的,所以有点丑,重点关注业务逻辑吧。
自定义个播放器,组件都是用的原生的,所以有点丑,重点关注业务逻辑吧。
界面大概长下面这个样子。
大家可以看着界面,在脑海中想一下自己会如何实现这个视频播放器。可以问自己以下几个问题:
视频,其实就是一系列连续播放的图片,如果1s钟播放24张图片,视频的帧率就是24。
如果视频的的尺寸是1920*1080,即一张图片的尺寸是1920*1080*3 bytes,乘3是因为一个像素点3个比特,分别存放rbg,那么一个30分钟的视频所需要的存储空间如下:
//1s视频需要的存储空间为:
1920*1080*3*24 bytes
//30min视频需要的存储空间:
1920*1080*3*24 * 60*30=250.28GB
可以看到,非常大,所以视频需要压缩,于是就有了编码(codec)的概念。视频的编码格式可以理解为压缩格式,不同的编码格式压缩率不同,常见的编码格式有 h264,mpeg4,vp8等。
此外,需要注意的一点是,因为编码格式是有版权问题的,所以不同的浏览器支持的编码格式不同,所以就会出现有些编码格式的视频在某些浏览器播放不了,或者只有声音没有画面的情况。
我们前端开发只需要记住一点,主流浏览器支持的视频编码格式是h264。
一个视频文件内会包含视频流和音频流,还有一些元数据,例如分辨率信息,标题等,这个文件的格式我们称为封装格式,可以理解为打包格式,常见的mp4,WEBp,mov,mpeg等都是封装格式。
封装格式往往是与视频编码无关的,一个mp4文件,里面的视频流编码可以是h264,也可以是mpeg,所以就会出现,同样都是mp4文件,有的浏览器可以放,有的浏览器就放不了的问题。
<video controls poster="1.jpg" src="1.mp4" loop muted></video>
<audio controls src="1.mp3"></audio>
src指定资源地址,poster为视频指定一张封面图,controls表示浏览器应该显示UI控件(每个浏览器样式不同)
下面是video和audio的通用属性
video和audio通用事件
有了上述的属性、事件及方法,我们就可以做很多事了,比如自定义播放器,使用播放器本地预览视频等。
代码是用React实现的,用Vue也是一样的,关注业务逻辑即可。如果大家有需求,我可以再更新下这篇文章,添加上Vue的代码。
注意:dom原生事件在react中需要前面加个on,然后写成驼峰的形式
function fORMatDuration(duration) {
var sec_num = parseInt(duration, 10); // don't forget the second param
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
return hours+':'+minutes+':'+seconds;
}
import React, { createRef, useState } from 'react'
import './VideoPlayer.CSS'
function VideoPlayer({src}){
const videoDom=createRef()
// 视频当前播放时间
const [curTime,setCurTime]=useState(0)
// 视频时长
const [duration,setDuration]=useState(0)
// 视频状态,是否暂停
const [isPause,setPause]=useState(true)
// 视频真是尺寸
const [size,setSize]=useState({width:1920,height:1080})
// 视频加载中
const [waiting,setWaiting]=useState(true)
// 视频元数据加载成功
const onLoad=(e)=>{
const {duration,videoWidth,videoHeight}=e.target
setDuration(duration)
setSize({width:videoWidth,height:videoHeight})
setWaiting(false)
}
// 控制播放暂停
const handlePlay=(play)=>{
const v=videoDom.current
if(play){
setPause(false)
v.play()
}else{
setPause(true)
v.pause()
}
}
// 拖动slider时改变视频currentTime
const onSliderChange=(e)=>{
setCurTime(e.target.value)
videoDom.current.currentTime=e.target.value
}
// 监听video timeupdate
const onTimeUpdate=()=>{
const v=videoDom.current
setCurTime(v.currentTime)
if(v.ended){
handlePlay(false)
v.currentTime=0
}
}
// 卡顿时,显示加载中提示
const onWaiting=()=>{
setWaiting(true)
}
// 可以播放时,隐藏加载中提示
const onCanPlay=()=>{
setWaiting(false)
}
return <div className="video-wrapper">
<video ref={videoDom} src={src} onLoadedMetadata={onLoad} onTimeUpdate={onTimeUpdate} onWaiting={onWaiting} onCanPlay={onCanPlay} ></video>
{}
{waiting && <div className="waiting">loading...</div>}
<div className="video-controls">
{}
{isPause? <button onClick={()=>{handlePlay(true)}}>播放</button>: <button onClick={()=>{handlePlay(false)}}>暂停</button>}
{}
<input type="range" min="0" max={duration} value={curTime} onChange={onSliderChange}/>
{}
<span>{formatDuration(curTime)}/{formatDuration(duration)}</span>
<span>分辨率:{size.width}x{size.height}</span>
</div>
</div>
}
export default VideoPlayer
样式写了一点点,VideoPlayer.css
.video-wrapper{
width:800px;
}
.video-wrapper>video{
width: 100%;
}
.video-controls{
margin-top: 20px;
}
本文的重点不在于React,React只是一个载体,同样的逻辑可以很容易地用Vue实现,重点在于自定义一个视频播放器的逻辑。
到此这篇关于浏览器中视频播放器实现的基本思路与代码的文章就介绍到这了,更多相关浏览器中视频播放器实现内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 浏览器中视频播放器实现的基本思路与代码
本文链接: https://www.lsjlt.com/news/133421.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0