I'm trying to make custom HTML5 audio event buttons. I know I can use the controls but I want to make my own my code is below:
<audio autoplay="true" loop src="vid/birth.mp3"></audio>
<button onclick="document.getElementsByTagName('audio').play()">Play</button>
<button onclick="document.getElementByTagName('audio').pause()">Pause</button>
When I load the page the audio starts but the controls won't work, I click them and nothing happens. What am I doing incorrectly?
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
Related
Background
Creating a portfolio page showcasing images and videos using Gatsby/React. I have stored the media sources in an array and then I traverse over this array to create a grid.
Problem
The video thumbnails in the grid are getting duplicated. The second video is getting the thumbnail of first video:
Although, the dev tools show different sources for these videos.
Happens again on another page:
Video objects are created as following:
<VideoContainer key={`vid-${section}-${itemCounter}`}>
<video className="proj-video" preload="metadata">
<source src={currImg.src} type={`videomp4`} />
</video>
<div className="btn-container">
<FontAwesomeIcon color="white" size="4x" icon="play" />
</div>
</VideoContainer>
<VideoContainer /> is a styled div.
It happens on multiple videos. What I've tried so far:
Ensure that the sources of these videos are different. When the video is played (by clicking on the play button over the thumbnail), correct video is played.
Add a key attribute on the video tag as well. But, it doesn't solves the problem.
Note: It is very indeterministic behavior because it doesn't happens always. Sometime, it gets corrected on page refresh and sometimes it doesn't.
Edit
You can see that I am not setting thumbnail from another source. It just displays the video frame. I append "#t=10" (any number) at the end of video URL and add preload="metadata" on the video tag to load the frame at that time.
Try adding a more unique key:
<VideoContainer key={currImg}>
<video className="proj-video" preload="metadata">
<source src={currImg.src} type={`videomp4`} />
</video>
<div className="btn-container">
<FontAwesomeIcon color="white" size="4x" icon="play" />
</div>
</VideoContainer>
vid-${section}-${itemCounter}, for its own nature, is a good identifier but not a good key, but it seems that may not be as unique as currImg is.
I have a special requirement with html5 <video>, I hope, you guys can help me out.
Is it possible to add a <div>,<p> or something above the html5 <video> object?
Plus Trigger the PlayState of the Video and hide it, and show it after the video is stopped?
This is the Poster:
eg:
<video width="280" height="158" poster="img/thumb.png" controls>
<source src="TestVideo1.mp4" type="video/mp4">
Get a new Browser my friend
<h1>Title</h1>
<p>Some Description</p>
</video>
And is should look like this
Is there any possible way to do this?
Thank You
Note:
I have read this post Overlaying a DIV On Top Of HTML 5 Video but it didn't helped.
Images:
Poster
http://i.stack.imgur.com/vA1zn.png
It should be like this:
http://i.stack.imgur.com/qsZaI.png
You are going to have to use a combination of the canvas tag and javascript to get what you want.
Try taking a look at these two articles for a start:
video + canvas = magic
Using CSS3 and Jquery to create a custom HTML5 Player
If we set controls attribute on video
<video src="http://www.w3schools.com/html/mov_bbb.ogg" controls></video>
it stops propagation of touch events. Why is that happens, and is there a way to fix this?http://jsfiddle.net/HptdV/
ontouchstart event isn't supported in most of the desktop browsers as it is for (iphone/tablet) see documentation.
That's why the fiddle don't show the alert.
As you can see in the UPDATE FIDDLE without the controls the alert is not fired as well.
If you want to control the video you can do it this way html5 audio api
EXAMPLE
<video id="demo" src="http://www.w3schools.com/html/mov_bbb.ogg"></video>
<div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>
So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S
I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});
How do I simultaneously pause the player AND cause the the containing modal to slide up/away (to "un-reveal")?
Presently, after the play button is clicked, and the modal's upper-left (x)...the & #215;...is clicked...the modal slides away, but the video continues to play. To avoid this, the user must: 1) pause the video, and THEN 2) close the modal. I'd like a click or tap on any of the modal's triggers--for instance, clicking the (x)--to do both actions at the same time. I'm trying to find a solution that will work across platforms / devices.
Here's what I got so far, which is not working...
IN HEAD OF DOM BETWEEN SCRIPT TAGS
document.getElementById("pauseX").onclick = function () {
document.getElementById('player2').pause();
};
TRIGGER TO REVEAL MODAL
Click here to reveal modal.
VIDEO + MODAL CONTAINER
<div id="vid-1" class="reveal-modal">
<div class="center">
<video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
<source type="video/mp4" src="../media/vid-1-480x320.mp4" />
<source type="video/webm" src="../media/vid-1-640x480.webm" />
<object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="../build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=../media/vid-1-480x320.mp4" />
<img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1"
title="No video playback. Update browser, enable Javascript, or install Flash." />
</object>
</video>
</div>
<a id="pauseX" class="close-reveal-modal">×</a>
</div>
Already tried many other solutions, including...
Javascript to stop HTML5 video playback on modal window close
...so any help is appreciated. I think it's possible either the MediaElement.js or Reveal.js file may need to be tweaked or something?
Incidentally, clicking anywhere outside of the modal--i.e., on the "gloss"--causes it to slide up/away; hitting the escape key on the keyboard does the same. Clicking anywhere on the video player causes it to pause. Would love it if all of these functions are retained along with tapping on mobile devices. (Haven't tested that yet.)
if you have document.getElementById("pauseX").onclick... at the top of your document probably the code doesn't work because element with id pauseX is not already on the dom. Look at the javascript console, you should see some related error
Try to move these instructions on the bottom or on DOM ready event
Got it solved with this script...
<script>
$('.close-reveal-modal').click(function() {
$('video, audio').each(function() {
$(this)[0].player.pause();
});
});
</script>
There were multiple MediaElement.js vids on each page (one for each potential modal)...each vid being identified with the same id="player2" attribute...which was also keeping the page from validating. Tried switching that in my original script from getElementByID to getElementByName...didn't work. Created a class in lieu of an ID for each player...that didn't work. Irregardless of the validation issues: the above solution--simply inserting the .close-reveal-modal class directly into the "stop all" script for MediaElement.js works great. (Thanks #Fabrizio for suggesting I examine my ID attributes to begin with...)