音频

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<any>()
  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 (
    <MainView>
      <audio ref={audioRef} src={musicUrl} controls onCanPlay={()=>{
        // 用户可以开始播放视频/音频时触发。
        console.log('onCanPlay');
      }} onCanPlayThrough={()=>{
        // 在视频/音频可以正常播放且无需停顿和缓冲时触发。
        console.log('onCanPlayThrough');
      }} onEnded={()=>{
        // 视频/音频播放结束时触发。
        console.log('onEnded');
      }} onWaiting={()=>{
        // 视频/音频由于要播放下一帧而需要缓冲时触发。
      }} onError={()=>{
        // 视频/音频数据加载期间发生错误时触发。
      }}/>
      <FlexView>
        <button onClick={()=>{
          audioRef.current.play()
        }}>开始</button>
        <button onClick={()=>{
          audioRef.current.pause()
        }}>暂停</button>
        <button onClick={()=>{
          audioRef.current.playbackRate = '2';
        }}>2倍播放</button>
        <button onClick={()=>{
          audioRef.current.playbackRate = '4';
        }}>4倍播放</button>
        <button>当前时间:{timer}</button>
        <button>总时间{duration}</button>
        <button onClick={()=>{
          audioRef.current.volume = 0.2
        }}>20音量</button>
        <button onClick={()=>{
          audioRef.current.volume = 0.5
        }}>50音量</button>
        <button onClick={()=>{
          audioRef.current.volume = 0.8
        }}>80音量</button>
        <button onClick={()=>{
          audioRef.current.currentTime = 62
        }}>进度：1分钟</button>
        <button onClick={()=>{
          audioRef.current.currentTime = 124
        }}>进度：2分钟</button>
      </FlexView>
    </MainView>
  )
}
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?!');
  });
});


<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

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<any>()
  useEffect(()=>{
    if (videoRef.current){
      console.log('player=',videoRef.current);
    }
  },[videoRef])
  return (
    <MainView>
      <video
        ref={videoRef}
        controls
        preload="auto"
        // poster="MY_VIDEO_POSTER.jpg"
        data-setup="{}"
        style={{width:'100%',height:400,backgroundColor:'red'}}
        onCanPlay={()=>{
          // 用户可以开始播放视频/音频时触发。
          console.log('onCanPlay');
        }} onCanPlayThrough={()=>{
          // 在视频/音频可以正常播放且无需停顿和缓冲时触发。
          console.log('onCanPlayThrough');
        }} onEnded={()=>{
          // 视频/音频播放结束时触发。
          console.log('onEnded');
        }} onWaiting={()=>{
          // 视频/音频由于要播放下一帧而需要缓冲时触发。
        }} onError={()=>{
          // 视频/音频数据加载期间发生错误时触发。
        }}
      >
        <source src={videoUrl} type="video/mp4"></source>
        {/* <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
        <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source> */}
      </video>
    </MainView>
  )
}
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