JSFiddle - React, Tailwind, and code Playground

by sambrace

HTML

<video onmouseover="motion()" onmouseout="still()" width="400" id="demo-animation" controls muted class="cld-video-player cld-video-player-skin-dark">
</video>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.js"></script>

<script type="text/javascript" src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.js"></script>
<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">


<script type="text/javascript">
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
var player = cld.videoPlayer('demo-animation', {videojs: { bigPlayButton: false } }).width(300);
var videoPlaying = false;
player.on("playing", playingEvent);
player.source("snow_deer");

function playingEvent() {
    videoPlaying = true;
}
function motion() {
    if(videoPlaying == false)
        player.source("snow_deer", {poster: {publicId: "snow-deer-gif.gif"}});
}
function still() {
    if(videoPlaying == false)
        player.source("snow_deer");
}

</script>