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;
Related
I want to autoplay audio in my website as soon as I open my site. But it doesn't work.
<audio id="myAudio" autoplay>
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/ogg">
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/mpeg">
</audio>
<script>
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
myFunction();
Should start playing the audio file when the page loads, thanks to the autoplay attribute on the <audio> element. The buttons in the HTML code allow you to control the audio playback by calling the play() and pause() methods on the <audio> element.
Note that some browsers may not allow audio to automatically play on a website due to user experience and security concerns. In these cases, the user may need to explicitly start the audio playback by clicking on a button or some other element on the page.
<audio id="myAudio" autoplay>
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/ogg">
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/mpeg">
</audio>
<p>
<button onclick="playAudio()">Play Audio</button>
<button onclick="pauseAudio()">Pause Audio</button>
</p>
<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
function pauseAudio() {
var audio = document.getElementById("myAudio");
audio.pause();
}
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
function PlayMusic() {
var play=document.getElementById("music");
play.play();
}
$(document).ready(function(){
setTimeout(PlayMusic,3000);
})
</script>
</head>
<body>
<audio controls id="music" >
<source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mpeg">
</audio>
</body>
</html>
After page load audio will play (1 sec delay).
URL The URL of the audio file. Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/horse.ogg")
A relative URL - points to a
file within a web site (like src="horse.ogg")
I would like to interact with the vertical ellipses in an HTML DOM Audio Object. Here is an example audio object: (credit: w3schools, original HTML taken from https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_controller)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
I've had success with implementing the pause/play controls, returning the duration of the song and getting the SRC. Here I create a button that executes myFunction() to click the play button:
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myAudio");
x.play();
}
</script>
</body>
</html>
What I would like to do is to click on the vertical ellipses
then click again to download the song.
My question is: what is the JavaScript code to click on the vertical ellipses in the audio object?
You can't. In fact, the UI of the player is not necessarily standard. It can vary from platform to platform.
You can use .src to get the src attribute of the media element and download it yourself via the Fetch API or similar.
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
Is there anyway or javascript class or function that I can used to get the duration on the embed file?
I know we can do it like this
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function myFunction() {
alert(vid.duration);
}
</script>
<p>Video courtesy of Big Buck Bunny.</p>
</body>
</html>
it only works on some supported browsers but not in ie8 below. Can anyone guide me how can I get the duration of the embed files? that can work on any crossbrowsers? or do I need to make a parser? please help thank you.
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;}