Embedding Video Player in React: Configuration Guide

This article demonstrates code snippets for the Player in the React Framework.

The player is constructed atop Video.js, inheriting its comprehensive functionality, which permits the application of any events and methods that Video.js offers, enriching the development process with a wide array of capabilities.

Disclaimer:

The player leverages Video.js as its foundation, enabling the utilization of its vast array of events and methods, as detailed in their official documentation: Video.js Documentation. The use of Video.js’s inherent functionalities is governed by their established guidelines and is furnished on an "as is" basis. We disclaim any responsibility for the deployment, performance, or any outcomes deriving from the employment of Video.js features. It is strongly recommended for users to consult the Video.js documentation directly to obtain dependable guidance and support.

import { useEffect} from "react"
export default function Player({url}){
    useEffect(()=>{
            var player_options = {
                interactive:true,
                size:"hd",
                src:url,
                autoplay:false,
                mute:true,
                cta_analytics:[
                    ["idm-cta-btn1", "Like"],
                    ["idm-cta-btn2", "Dislike"]
                ]
            }
            idmPlayerCreate(player_options, "idm-player")
        },[url])
    
    
        return (
            <div id="idm-player"></div>
        )

 }