如何在 ReactJS 中播放/暂停视频或音频？

在本文中，我们将讨论如何打开/关闭视频或音频。我们将了解如何使用切换按钮打开或关闭视频/音频

为了更好地理解，我们将保持实现简单。

创建和设置环境：

第 1 步：使用以下命令创建一个 React 应用程序

npx  create-react-app myapp

第 2 步：创建 React 应用程序后，使用以下命令移动到我们的项目目录

cd myapp

在 src 文件夹中，你会找到 App.js 文件，我们将修改这个组件。

项目结构：它将如下所示：

示例：该组件是 App.js，它有一个视频元素，您的视频将在其中出现。左下角有两个切换按钮，您可以通过它们切换视频/音频。

• 应用程序.js：

Javascript

import { useEffect, useState, useRef } from "react";
  
export default function App() {
    const [mystream, setmystream] = useState(null);
    const [videoswitch, setvideo] = useState(true);
    const [audioswitch, setaudio] = useState(true);
    const myvideo = useRef(null);
  
    useEffect(() => {
        navigator.mediaDevices
            .getUserMedia({ video: true, audio: true })
            .then((stream) => {
                myvideo.current.srcObject = stream;
                myvideo.current.autoplay = true;
                myvideo.current.muted = false;
                setmystream(stream);
            });
    }, []);
  
    const handleVideo = () => {
        if (videoswitch) {
            setvideo(false);
            mystream.getTracks().forEach(function (track) {
                if (track.readyState === "live" && 
                    track.kind === "video") {
                    track.enabled = false;
                }
            });
        } else {
            setvideo(true);
            mystream.getTracks().forEach(function (track) {
                if (track.readyState === "live" && 
                    track.kind === "video") {
                    track.enabled = true;
                }
            });
        }
    };
    const handleAudio = () => {
        if (audioswitch) {
            setaudio(false);
            mystream.getTracks().forEach(function (track) {
                if (track.readyState === "live" && 
                    track.kind === "audio") {
                    track.enabled = false;
                }
            });
        } else {
            setaudio(true);
            mystream.getTracks().forEach(function (track) {
                if (track.readyState === "live" && 
                    track.kind === "audio") {
                    track.enabled = true;
                }
            });
        }
    };
    return (
        

            
                {videoswitch ? "Turn off video" : 
                    "Turn on video"}
            
            
                {audioswitch ? "Turn off audio" : 
                    "Turn on audio"}
            
            
        
    );
}

此组件中使用的状态：

1. mystream：此状态将保存用户媒体流。
2. videoswitch：这将保持视频切换按钮的当前状态。
3. audioswitch：这将保持音频切换按钮的当前状态。

我们使用 useRef 钩子来访问视频元素并设置它的 srcObject 属性：

const myvideo = useRef(null);

现在，当组件第一次挂载时，使用 react hook useEffect 获取用户媒体并设置视频元素的 srcObject 属性。我们为按钮创建了两个 onClick 事件侦听器，以便我们可以在开/关之间切换。

如果视频或音频已经关闭，我们将使用

track.enabled=true

注意：如果要停止流式传输，可以使用 track.stop()

启动应用程序：现在使用以下命令启动开发服务器

npm start

输出：