JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script type="text/javascript" src="https://embed-ssl.wistia.com/deliveries/47ecb65faa3c670042b5e4b4b1c79054.bin?disposition=attachment&filename=jquery-2.2.4.min.js?"></script>
<script type="text/javascript" src="https://embed-ssl.wistia.com/deliveries/51d8eb80d62661ab12b9c504608e719d.bin?disposition=attachment&filename=CaCb0lHw.js"></script>
<script type="text/javascript">jwplayer.key = "rkFpWDE+hpAk+/wbx0iQVaOCluss7rHZni1jyKW6k3tEtrEHEbABAs57iXY=";</script>
<div id="emergencycouplesatu"></div>
<script type="text/javascript">
jwplayer("emergencycouplesatu").setup({
playlist: [
<!--00077-->
       {sources: [
{file: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4"},
    
{ file: "" }],
        image: "",
        title: "Kelis-Milkshake",
        tracks: [{file: "",label: "spanish",kind: "captions","default": true},{file: "",label: "English",kind:                 "captions",}]}
          
],
autostart: true,
controls: true,
play: true,
mute: false,
rate: true,
stretching : "exactfit",
    	events:{
        onBufferChange: function(callback) {
              //  console.log(callback.buffer);
               // console.log(jwplayer("emergencycouplesatu").getBuffer());
            }
        },
width: 640,
height: 360,
listbar: {
position: "right",
size: 200,
    }
  });
function addVideo(videoUrl, videoThumb, videoTitle) {
var playlist = jwplayer().getPlaylist();
var newItem = {
file: videoUrl,
image: videoThumb,
title: videoTitle
        };
playlist.push(newItem);
jwplayer().load(playlist);
    }
</script>

<script>

</script>

JavaScript

const App = () => {
	const [playbackRate, setPlaybackRate] = React.useState(1)
	return (
  	<div>
      <ReactPlayer
        url='http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4'
        className='react-player'
        playing
        controls
        width='320px'
        height='180px'
        playbackRate={playbackRate}
      />
      <button onClick={() => setPlaybackRate(0.5)}>x0.5</button>
      <button onClick={() => setPlaybackRate(1.070)}>x1.070</button>
      <button onClick={() => setPlaybackRate(2)}>x2</button>
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('emergencycouplesatu')
);