admin管理员组文章数量:1530290
缘起
事情是酱紫的, 我现在笔记本电脑硬盘呢, 是比较小的250G的, 然后呢我大部分看视频都是线上直接看了, 但是就是偶尔会有一些资源需要下载下来慢慢看. 硬盘太小装了几次QQ影音都给卸载了, win10自带的播放器我也给卸载了(虽然不怎么占空间但是功能少, 我最喜欢的倍速播放都没有). 突然想起来我随时使用的网页在线播放器功能也蛮丰富的, 能不能直接做一个网页播放本地视频呢?
开始
百度了一下子, 找到了一个文件相关的函数URL.createObjectURL, 完全能满足我的要求, 那就开干吧.
大体思路是这样的, 做一个input[type=file], 选择视频然后直接加载给Video组件进行播放, 然后呢也写一个拖拽事件让视频直接拖拽到网页进行播放, 由于是React, 那怎么能少得了TypeScript嘛
新建一个player.tsx文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import React, { ChangeEvent } from 'react'
export default ()=>{
function handlePaly(e: ChangeEvent){
const [ file ] = e.target.files
// 然后这里就能取到 input 选择的 file 文件进行处理了
const blobURL = URL.createObjectURL(file)
}
return
}
选择了视频之后需要对DOM进行交互, 然后展示Video嘛, 这里就需要用到Hook来管理状态了, 把视频地址存放到 blobURL 里面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18import React, { useState, ChangeEvent } from 'react'
export default ()=>{
const [ blobURL, setURL ] = useState('')
function handlePaly(e: ChangeEvent){
const [ file ] = e.target.files
// 然后这里就能取到 input 选择的 file 文件进行处理了
setURL(URL.createObjectURL(file))
}
return
{ blobURL&& }
}
到了这里已经能够实现播放本地的视频了, 但是我懒癌发作真不想慢慢去选视频呢, HTML5给我们提供了拖拽的事件, 我们可以直接通过拖拽事件来直接获得文件或文件夹
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35import React, { useState, useEffect, ChangeEvent } from 'react'
export default ()=>{
const [ blobURL, setURL ] = useState('')
// 我从 DragEvent中实在是找不到 e.dataTransfer 所以先用any来用一下
function handlePaly(e: ChangeEvent | any){
const [ file ] = e.target.files || e.dataTransfer?.files
// 然后这里就能取到 input 选择的 file 文件进行处理了
setURL(URL.createObjectURL(file))
}
// +++++++++++++
useEffect(()=>{
const current = window.document.body
// 拖拽进入
current?.addEventListener("dragenter", ()=>{ /* at do sth */ }, false)
// 拖拽结束 阻止冒泡, 防止浏览器直接打开
current?.addEventListener("dragover", e => e.preventDefault(), false)
// 拖拽离开
current?.addEventListener("dragleave", ()=>{ /* at do sth */ }, false)
// 拖拽事件
current?.addEventListener("drop", e=> {
e.preventDefault()//取消事件的默认动作。
// e.dataTransfer
handlePaly(e)
},false)
}, [])
// +++++++++++++
return
{ blobURL&& }
}
浏览器的原生Video组件虽然能用但是很丑啊, 而且啥倍速也没用, 虽然自己写一个美化的Video也不难但是还是去找Github一个开源的视频播放器吧. 最后我找到了这个 DPlayer
1npm install react-dplayer
1
2
3
4
5
6
7
8
9...
return
{ blobURL&& }
}
缘灭
当然还有那些拖拽美化, 视频播放器的css美化就不写上来了, 这也只是突发奇想做的一个小Dome罢了
版权声明：本文标题：html 播放视调用本地播放器,用HTML5做一个本地视频播放器 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725774745a1041807.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论