React:音视频播放

音频

import { Button } from 'antd'
import Head from 'next/head'
import type { NextPage } from 'next'
import Layout from '../components/Layout'
import * as echarts from 'echarts';
import { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

const musicUrl = 'https://music.163.com/song/media/outer/url?id=1349292048.mp3'
const videoUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4'

const Music:NextPage = (props:any)=> {
  const audioRef= useRef()
  const [timer,setTimer] = useState('00:00')
  const [duration,setDuration] = useState('00:00')

  /**
   * 开始、暂停、倍速、当前播放时间、总时间、音量、播放进度
   */
  useEffect(()=>{
    audioRef.current.ontimeupdate = () => {
      const timer = (Math.floor(audioRef.current.currentTime / 60) + "").padStart(2,"0") + ':' +
      (Math.floor(audioRef.current.currentTime % 60) + "").padStart(2, "0")
      setTimer(timer)
    }
    const dura = (Math.floor(audioRef.current.duration / 60) + "").padStart(2,"0") + ':' +
    (Math.floor(audioRef.current.duration % 60) + "").padStart(2, "0")
    setDuration(dura)

  },[audioRef.current])
  return (
    
      
  )
}
const MainView = styled.div`
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
`
const FlexView = styled.div`
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
`
export default Music

视频

yarn add @types/video.js

// https://videojs.com/guides/options/
var options = {};

var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');

  // In this context, `this` is the player that was created by Video.js.
  this.play();

  // How about an event listener?
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});

OR

import { Button } from 'antd'
import Head from 'next/head'
import type { NextPage } from 'next'
import Layout from '../components/Layout'
import * as echarts from 'echarts';
import { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

const videoUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4'

const Video:NextPage = (props:any)=> {
  const videoRef= useRef()
  useEffect(()=>{
    if (videoRef.current){
      console.log('player=',videoRef.current);
    }
  },[videoRef])
  return (
    
      
    
  )
}
const MainView = styled.div`
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
`
const FlexView = styled.div`
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
`
export default Video