JSFiddle - React, Tailwind, and code Playground

by straeger

HTML

<div class="toolbar" id="controls">
    <div style="float:right">           
        <a href="" data-role="button" data-theme="a" data-mini="true" data-inline="true" id="player_hq_nq" title="">nq</a>
    </div>
    <div style="clear:both"></div>  
</div>

<div id="video_player">
<video autobuffer controls >
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" width="auto" height="auto" id="video" />
</video>

JavaScript

$( document ).ready(function() {
    var video = document.getElementById('video');
    var link = document.getElementById('player_hq_nq');
    
    $("#player_hq_nq").click(function(){  
        showVideo();  
   });  
});

function showVideo() {
    if (link.title == "nq") {
        link.title = "hq";

        video.setAttribute("src", "${href1}");
        video.load();
        video.play();

        console.log("well done");
    } else {
        video.setAttribute("src", "${href2}");
        video.load();
        video.play();
        link.title = "nq";

        console.log("well done");
    }
}