用HTML5做一个本地视频播放器

2020-10-25

缘起

事情是酱紫的, 我现在笔记本电脑硬盘呢, 是比较小的250G的, 然后呢我大部分看视频都是线上直接看了, 但是就是偶尔会有一些资源需要下载下来慢慢看. 硬盘太小装了几次QQ影音都给卸载了, win10自带的播放器我也给卸载了(虽然不怎么占空间但是功能少, 我最喜欢的倍速播放都没有). 突然想起来我随时使用的网页在线播放器功能也蛮丰富的, 能不能直接做一个网页播放本地视频呢?

Dome预览local-video-player

开始

百度了一下子, 找到了一个文件相关的函数URL.createObjectURL, 完全能满足我的要求, 那就开干吧.

大体思路是这样的, 做一个input[type=file], 选择视频然后直接加载给Video组件进行播放, 然后呢也写一个拖拽事件让视频直接拖拽到网页进行播放, 由于是React, 那怎么能少得了TypeScript嘛

新建一个player.tsx文件

import React, { ChangeEvent } from 'react'

export default ()=>{
  function handlePaly(e: ChangeEvent<HTMLInputElement>) {
    const [ file ] = e.target.files
    // 然后这里就能取到 input 选择的 file 文件进行处理了
    const blobURL = URL.createObjectURL(file)
  }
  return
    <div>
      <label className="drag-wrap">
        <input type="file" accept="video/*" onChange={ handlePaly } />
      </label>
    </div>
}

选择了视频之后需要对DOM进行交互, 然后展示Video嘛, 这里就需要用到Hook来管理状态了, 把视频地址存放到 blobURL 里面

import React, { useState, ChangeEvent } from 'react'

export default ()=>{
  const [ blobURL, setURL ] = useState('')

  function handlePaly(e: ChangeEvent<HTMLInputElement>) {
    const [ file ] = e.target.files
    // 然后这里就能取到 input 选择的 file 文件进行处理了
    setURL(URL.createObjectURL(file))
  }
  return
    <div>
      { blobURL&&<video src={blobURL} autoplay /> }
      <label className="drag-wrap">
        <input type="file" accept="video/*" onChange={ handlePaly } />
      </label>
    </div>
}

到了这里已经能够实现播放本地的视频了, 但是我懒癌发作真不想慢慢去选视频呢, HTML5给我们提供了拖拽的事件, 我们可以直接通过拖拽事件来直接获得文件或文件夹

import React, { useState, useEffect, ChangeEvent } from 'react'

export default ()=>{
  const [ blobURL, setURL ] = useState('')
  // 我从 DragEvent<HTMLDivElement>中实在是找不到 e.dataTransfer 所以先用any来用一下
  function handlePaly(e: ChangeEvent<HTMLInputElement> | 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
    <div>
      { blobURL&&<video src={blobURL} autoplay /> }
      <label className="drag-wrap">
        <input type="file" accept="video/*" onChange={ handlePaly } />
      </label>
    </div>
}

浏览器的原生Video组件虽然能用但是很丑啊, 而且啥倍速也没用, 虽然自己写一个美化的Video也不难但是还是去找Github一个开源的视频播放器吧. 最后我找到了这个 DPlayer

1	npm install react-dplayer

   ...
  return
    <div>
      { blobURL&&<DPlayer options={{ video:{ url: blobURL } }}/> }
      <label className="drag-wrap">
        <input type="file" accept="video/*" onChange={ handlePaly } />
      </label>
    </div>
}

缘灭

当然还有那些拖拽美化, 视频播放器的css美化就不写上来了, 这也只是突发奇想做的一个小Dome罢了