fixed the play/pause functionality on videos

This commit is contained in:
bill bittner 2017-11-29 16:02:40 -08:00
parent 15999c6a84
commit e5d3fdf322
5 changed files with 33 additions and 27 deletions

View file

@ -1,23 +1,26 @@
function playOrPause(video){ const showFunctions = {
if (video.paused == true) { addPlayPauseToVideo: function () {
video.play(); const that = this;
} const video = document.getElementById('video-asset');
else{ if (video) {
video.pause(); // add event listener for click
} video.addEventListener('click', ()=> {
} that.playOrPause(video);
});
// if a video player is present, set the listeners // add event listener for space bar
const video = document.getElementById('video-player'); document.body.onkeyup = (event) => {
if (video) { if (event.keyCode == 32) {
// add event listener for click that.playOrPause(video);
video.addEventListener('click', ()=> { }
playOrPause(video); };
});
// add event listener for space bar
document.body.onkeyup = (event) => {
if (event.keyCode == 32) {
playOrPause(video);
} }
}; },
playOrPause: function(video){
if (video.paused == true) {
video.play();
}
else{
video.pause();
}
}
} }

View file

@ -21,9 +21,9 @@
<body id="show-body"> <body id="show-body">
<script src="/assets/js/generalFunctions.js"></script> <script src="/assets/js/generalFunctions.js"></script>
<script src="/assets/js/navBarFunctions.js"></script> <script src="/assets/js/navBarFunctions.js"></script>
<script src="/assets/js/showFunctions.js"></script>
{{> navBar}} {{> navBar}}
{{{ body }}} {{{ body }}}
<script src="/assets/js/showFunctions.js"></script>
</body> </body>
</html> </html>

View file

@ -17,8 +17,8 @@
{{ googleAnalytics }} {{ googleAnalytics }}
</head> </head>
<body id="showlite-body"> <body id="showlite-body">
{{{ body }}}
<script src="/assets/js/showFunctions.js"></script> <script src="/assets/js/showFunctions.js"></script>
{{{ body }}}
</body> </body>
</html> </html>

View file

@ -1,6 +1,6 @@
<div id="asset-display-component"> <div id="asset-display-component">
<div id="asset-status"> <div id="asset-status">
<p id="searching-message" hidden="true">Sit tight, we're combing the LBRY blockchain for your asset!</p> <p id="searching-message" hidden="true">Sit tight, we're searching the LBRY blockchain for your asset!</p>
<div id="failure-message" hidden="true"> <div id="failure-message" hidden="true">
<p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY discord</a>.</p> <p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY discord</a>.</p>
<i><p id="error-message"></p></i> <i><p id="error-message"></p></i>
@ -90,7 +90,6 @@
console.log('xhr.readyState', xhr.readyState); console.log('xhr.readyState', xhr.readyState);
} }
}; };
// Initiate a multipart/form-data upload
xhr.send(); xhr.send();
}, },
getAsset: function(claimName, claimId) { getAsset: function(claimName, claimId) {
@ -113,7 +112,6 @@
console.log('xhr.readyState', xhr.readyState); console.log('xhr.readyState', xhr.readyState);
} }
}; };
// Initiate a multipart/form-data upload
xhr.send(); xhr.send();
}, },
} }

View file

@ -3,4 +3,9 @@
<source> <source>
<!--fallback--> <!--fallback-->
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
<script type="text/javascript">
showFunctions.addPlayPauseToVideo();
</script>