react 原生video标签用法

仙鹤小米粥

已于 2023-08-23 10:29:07 修改

阅读量571

点赞数 1

文章标签： javascript 前端 html

于 2023-08-23 10:25:59 首次发布

本文链接：https://blog.csdn.net/u011561536/article/details/132446723

版权

  const ref = useRef(null); // 赋值给外层div
  const size = useSize(ref); 

  const videoRender = () => {
    setTimeout(() => {
      const jzVideo = document.getElementById('jzVideo');
      if (jzVideo) {
        // 禁止鼠标右键
        jzVideo.oncontextmenu = function (e) {
          return false;
        }
      }
    }, 500);
    return (
      <div>
        <div style={{ display: "flex", justifyContent: 'center', }}>
          <video
            id="jzVideo"
            controls
            controlsList="nodownload noremoteplayback noplaybackrate"
            disablePictureInPicture
            disableRemotePlayback
            width={size?.width ? size.width - 40 : '350px'}
            height="200px"
            preload="metadata"
            src="https://mqwe.mp4"
          />
        </div>
      </div>
    )
  }

禁止鼠标右键，禁止下载等菜单展示，禁止画中画