html5video

<div className="rh5v-DefaultPlayer_component ">
          <video className="rh5v-DefaultPlayer_video" poster="http://localhost:3000/0eade07f0c4b6c89b8e66472a03b765c.png">
            <source src="https://cdn.ipifny.com/images/ipifny.mp4" type="video/mp4" />
          </video>
          <div className="rh5v-Overlay_component ">
            <span className="rh5v-Overlay_inner">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="40"
                height="40"
                viewBox="0 0 24 24"
                className="rh5v-Overlay_icon"
                fill="#fff"
              >
                <g class="currentLayer"><title>Layer 1</title><rect x="561.7000122070312" y="348.79998779296875" width="150" height="45" id="svg_1"/><rect x="615.2000122070312" y="297.29998779296875" transform="matrix(-1.83697e-16,1,-1,-1.83697e-16,1007.9982,-265.3069) " width="43" height="148" id="svg_2"/><path d="M588.8,377l7.5-5.6l-7.5-5.6V377z M591.3,358.8c-6.9,0-12.5,5.6-12.5,12.5c0,6.9,5.6,12.5,12.5,12.5  c6.9,0,12.5-5.6,12.5-12.5C603.8,364.4,598.2,358.8,591.3,358.8z M591.3,381.3c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10s10,4.5,10,10  C601.3,376.9,596.8,381.3,591.3,381.3z" id="svg_3"/></g>
              </svg>
            </span>
          </div>
          <div className="rh5v-DefaultPlayer_controls">
            <div className="rh5v-PlayPause_component ">
              <button className="rh5v-PlayPause_button" aria-label="Play video" type="button">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  className="rh5v-PlayPause_icon"
                  fill="#fff"
                >
                  <path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
                </svg>
              </button>
            </div>
            <div className="rh5v-Seek_component rh5v-DefaultPlayer_seek">
              <div className="rh5v-Seek_track">
                <div className="rh5v-Seek_buffer" style={{width: "63.9051%"}} />
                <div className="rh5v-Seek_fill" style={{width: "3.08576%"}} />
                <input
                  type="range"
                  step="1"
                  min="0"
                  max="100"
                  orient="horizontal"
                  aria-label="Seek video"
                  className="rh5v-Seek_input"
                  value="3.0857614551718844"
                />
              </div>
            </div>
            <div className="rh5v-Time_component ">
              <span className="rh5v-Time_current">0:02</span>
              <span className="rh5v-Time_duration">1:29</span>
            </div>
            <div className="rh5v-Volume_component ">
              <button aria-label="Mute video" className="rh5v-Volume_button" type="button">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  className="rh5v-Volume_icon"
                  fill="#fff"
                >
                  <path d="M14.016 3.234C18.047 4.125 21 7.734 21 12s-2.953 7.875-6.984 8.766v-2.063c2.906-.844 4.969-3.516 4.969-6.703s-2.063-5.859-4.969-6.703V3.234zM16.5 12a4.451 4.451 0 0 1-2.484 4.031V7.968c1.5.75 2.484 2.25 2.484 4.031zM3 9h3.984L12 3.984v16.031l-5.016-5.016H3v-6z" />
                </svg>
              </button>
              <div className="rh5v-Volume_slider">
                <div className="rh5v-Volume_track">
                  <div className="rh5v-Volume_fill" style={{height: "100%"}} />
                  <input
                    type="range"
                    step="0.1"
                    min="0"
                    max="1"
                    orient="vertical"
                    aria-label="Change volume"
                    className="rh5v-Volume_input"
                    value="1"
                  />
                </div>
              </div>
            </div>
            <div className="rh5v-Fullscreen_component ">
              <button type="button" aria-label="View video fullscreen" className="rh5v-Fullscreen_button">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="#fff"
                  className="rh5v-Fullscreen_icon"
                >
                  <path d="M14.016 5.016h4.969v4.969h-1.969v-3h-3V5.016zm3 12v-3h1.969v4.969h-4.969v-1.969h3zm-12-7.032V5.015h4.969v1.969h-3v3H5.016zm1.968 4.032v3h3v1.969H5.015v-4.969h1.969z" />
                </svg>
              </button>
            </div>
          </div>
        </div>