I am looking for a way to show or hide HTML5 video controls at will via javascript. The controls are currently only visible when the video starts to play
Is there a way to do this with the native video controls?
I'm using google chrome browser.
<video id="myvideo">
<source src="path/to/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
<script>
var video = document.getElementById("myvideo");
function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
</script>
See it working on jsFiddle: http://jsfiddle.net/dgLds/
Here's how to do it:
var myVideo = document.getElementById("my-video")
myVideo.controls = false;
Working example:
https://jsfiddle.net/otnfccgu/2/
See all available properties, methods and events here: https://www.w3schools.com/TAGs/ref_av_dom.asp
CARL LANGE also showed how to get hidden, autoplaying audio in html5 on a iOS device. Works for me.
In HTML,
<div id="hideme">
<audio id="audioTag" controls>
<source src="/path/to/audio.mp3">
</audio>
</div>
with JS
<script type="text/javascript">
window.onload = function() {
var audioEl = document.getElementById("audioTag");
audioEl.load();
audioEl.play();
};
</script>
In CSS,
#hideme {display: none;}
Related
while my question may be similar to the one found at: hide video container when there's no video in database to be displayed HTML PHP, I am looking for a Javascript/jQuery solution.
Essentially the effect I need to achieve is that when the html5 <video> tag can't load the video from its src, I want the div the video tag is contained in to be hidden, preferably with a jQuery solution to this unless there's a very simple way to do this which I have over looked.
What i have so far looks similar to this:
<div id="video">
<video controls="controls" width="320" height="240">
<source src="published/video.mp4" type="video/mp4" />
</video>
</div>
Any input is greatly appreciated.
Here is a pure js solution:
document._video = document.getElementById("video");
document._video.addEventListener('error',function(){
$(document._video).hide()
});
Also you can look at the link below for other video events:
http://www.w3.org/2010/05/video/mediaevents.html
You can detect <video> support with http://modernizr.com/
if (!Modernizr.video) $('#video').hide();
http://modernizr.com/docs/#video
For check if file exists on server - How do I check if file exists in jQuery or JavaScript?
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bb.mp4" type="video/mp4">
<source src="mov_bb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
Big Buck Bunny.
</p>
<script>
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
v.parentNode.style.display = 'none';
}, false);
</script>
</body>
</html>
Copied from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded
I'm learning how to use video in HTML5, however, I can't remove the original controls using JavaScript. Below is the code
<body>
<video id='movie' controls>
<source src='video/example.mp4'/>
<p>Download video as <a href='video/example.mp4'>MP4</a></p>
</video>
<script>
function removeControls(){
var vid=document.getElementById('movie');
vid.removeAttribute('controls');
}
window.onload=removeControls;
</script>
</body>
Try this vid.controls = false;
I am playing videos one after another in following code,
<html>
<body>
<video src="videos/video1.mp4" id="myVideo" autoplay>
video not supported
</video>
</body>
<script type='text/javascript'>
var count=1;
var player=document.getElementById('myVideo');
player.addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e)
{ e = window.event; }
count++;
player.src="videos/video"+count+".mp4";
}
</script>
Now, my question is, There are many video files having different name (in remote directory) which is on server and
I don't know name of all files. So how to make their queue and play one after another using JavaScript??
This work for me :)
<video width="256" height="192" id="myVideo" controls autoplay>
<source src="video/video1.mp4" id="mp4Source" type="video/mp4">
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var count=1;
var player=document.getElementById('myVideo');
var mp4Vid = document.getElementById('mp4Source');
player.addEventListener('ended',myHandler,false);
function myHandler(e)
{
if(!e)
{
e = window.event;
}
count++;
$(mp4Vid).attr('src', "video/video"+count+".mp4");
player.load();
player.play();
}
</script>
Your variables are inconsistent:
change
videoplayer.src=nextvid;
to
videoPlayer.src = nextvid;
also, according to the solution that you linked, it appears that the user fixed it by binding it via javascript instead of using the onended attribute. Have you tried that?
videoPlayer.onended(function(e) {
run();
};
Not sure but i did something similar with pictures. Try using an if statement to determine if the video is done playing or a button is pressed and then change the src of the video to the next one in an array ex:
$("#my_videos").attr("src",videos[turn]);
Try to get the list of video files as a response from the server.
Store the response in an Array say "playlist".
Then change the video src as player.src=playlist[count]. Here "count" is the same counter you are using now.
The below code is how I put audio in my webpage. It will play the sound when I received protocol from my slave device.
<script>
function RxProtocol()
{
var a = document.getElementById("audio1");
a.play();
}
</script>
<body>
<audio id="audio1">
<source src="audio.wav" type="audio/wav">
<source src="audio.mp3" type="audio/mpeg">
audio tag not supported.
</audio>
</body>
It is suppose to play the sound each time it received a protocol. But when I use google Chrome, it just play once only (after refresh/reloading the page) when it received the first protocol. After that it is silence when receive protocols.
Other browser like IE9 or firefox do not have this problem. Do you guys know why?
Try adding addEventListener :
<script>
function RxProtocol()
{
var a = document.getElementById("audio1");
a.play();
}
document.addEventListener("load", RxProtocol, false);
</script>
Regards, Daniel
We need to load first for Google Chrome:
function RxProtocol()
{
var a = document.getElementById("audio1");
if (window.chrome) {
a.load();
}
a.play();
}
I have a problem with creating a video player in my webpage. I have a list of video title and one video player using object tage.
My purpose: when i click on video title, it will load the video and play according to video's file.
Can anyone help me to solve this problem?
Try the demo
Test video<br>
Pentagon<br>
Cat Giraffe<br>
<video id="player" src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
<script type="text/javascript">
$(function(e) {
$('a').click(function(e) {
e.preventDefault();
var video_file = $(this).attr('href');
$('#player').attr('src', video_file)[0].play();
});
});
</script>