SerenityNetworks Posted June 24, 2016 Share Posted June 24, 2016 (edited) I have an image I use to toggle between playing a video and pausing the video. The image also employs hover controls to highlight the image when the mouse is over it. <a onclick="playPause();" > <img id='hoverPlayPause' class="hover2" src="images/play_transparent.png" alt="Play/Pause" onmouseover="onHoverPlayPause();" onmouseout="offHoverPlayPause();" /> </a> The image link calls the following functions and styles. function playPause() { //vCurrentTime = vid.currentTime; if (vvid.paused) {vvid.play(); speed2(1.00); setInterv(); findWord(jQuery('#findWord').val()); } else { vvid.pause(); clearInterv(); } } function onHoverPlayPause() { $("#hoverPlayPause").attr('src', 'images/play_transparent.png'); } function offHoverPlayPause() { $("#hoverPlayPause").attr('src', 'images/play_transparent.png'); } <style> .hover2 { /* Slower, Back, Play/Pause, Forward, Faster buttons */ width: 30px; height: 25px; margin-bottom:10px; border:medium; border-color:black; border-style:solid; padding:2px; } .hover2:hover { /* Slower, Back, Play/Pause, Forward, Faster buttons */ background-color: #4CAF50; /* green */ width: 30px; height: 25px; margin-bottom:10px; border:medium; border-color:black; border-style:solid; padding:2px; } </style> I'd like to toggle the image between the (current) "play_transparent.png" image and a "pause_transparent.png" image, so the "pause_transparent.png" image displays while the video is playing and the "play_transparent.png" image displays while the video is paused. I've been unsuccessful in getting it to happen. I'm a hobbyist and can muddle my way through code somewhat, but I'm not a developer. I would appreciate assistance with the code to make the play/pause image toggle work. Thanks in advance, Andrew Edited June 24, 2016 by SerenityNetworks Link to comment Share on other sites More sharing options...
Ingolme Posted June 24, 2016 Share Posted June 24, 2016 I'd start off by simplifying the HTML: <a id="play-button"><img class="hover2" src="images/play_transparent.png" alt="Play/Pause"></a> Leave all the event handling to Javascript. I don't know where the variable vvid is set, but if you're depending on it to exist without having declared it yourself (for example, "vvid" is the id attirbute of an element) then your code is not likely to work in all environments. If vvid is just an attribute, then set it in the code: var vvid = document.getElementById("vvid"); I don't know what all these functions do so I'll have to leave them as is but I'm pretty sure this code could be optimized further. speed2 setInterv findWord clearInterv So here's the code rewritten to change the image when the video is started or stopped: var button = document.getElementById("play-button"); var img = button.getElementsByTagName("img")[0]; var wordElement = document.getElementById("findWord"); button.addEventListener("click", playPause, false); function playPause() { // Assuming vvid was set somewhere else in the code. if (vvid.paused) { // Unknown code vvid.play(); speed2(1.00); setInterv(); findWord(wordElement.value); // Change the image img.src = 'images/play_transparent.png'; } else { // Unknown code vvid.pause(); clearInterv(); // Change the image img.src = 'images/pause_transparent.png'; } } Link to comment Share on other sites More sharing options...
SerenityNetworks Posted June 24, 2016 Author Share Posted June 24, 2016 Perfect! Thank you. Yes, vvid is an attribute and I had already set it in the code. It took me a little bit to digest and test, but I see what you are doing. I'll be able to apply this to several other buttons on the page. ...but I'm pretty sure this code could be optimized further. Ha! No doubt about that point. I'm quite sure there are many optimizations on the page that could be made. But the page works and it would be a bit much to ask someone to go through it all and optimize the content. Thank you very much for the help and instruction. Andrew Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now