react hooks 移动端使用视频播放组件video.js

下载video.js

npm i video.js

使用方法:

import React, { useEffect, useRef, useState } from 'react';
import videojs from 'video.js';
const videoDetailsDom = useRef();
const [flage,setFlage] = useState(true)	//安卓12控制声音自动播放
  let optiones = {
    controls: true,
    // height:245,
    autoplay: true, //视频是否自动播放安卓12无效
    preload: 'auto',
    width: document.body.clientWidth,
  };
  // 视频播放控件
  const videoDom = useRef();
  //videoDetails为视频数据
  useEffect(() => {   
    if(videoDetails){
        var player =  videojs(videoDom.current, optiones, function onPlayerReady() {
        this.src(videoDetails.mediaUrl);	//视频url
        this.poster(videoDetails.previewImage); //视频封面图
        this.landscapeFullscreen(); // github上说解决横屏播放 但是没起作用
      });
      //flage为浏览器只支持静音视频自动播放，用这个来控制打开关闭声音
      setTimeout(()=>{
        setFlage(false)
      },0)
      return () => {
      //销毁控制视频高度
        if(player){
          player.dispose()
        }
      }
    }
  }, [videoDetails]); 
return (
<video id="videoId"  ref={videoDom} className="video-js" playsInline={true} muted={flage}></video>
)