I have seen a method to disable right click, but I was wondering how do you disable it on HTML5 audio.
I have seen examples for disabling right click using a line of JS, but however it does not work on DOM.
JS:
document.addEventListener('contextaudio', event => event.preventDefault());
HTML:
<audio controls controlslist="nodownload" name="media">
<source
src="test.mp3"
type="audio/mp3"
/>
</audio>
Just simply add oncontextmenu= "return false;" like this:
<audio oncontextmenu="return false;" controls controlslist="nodownload" name="media">
<source src="cool.mp3" type="audio/mp3"/>
</audio>
Related
I'm trying to insert an audio file in html but it doesn't play if I set it to hidden.
<audio src="file/example.ogg" autoplay="true" hidden="true" loop="true" />
Any ideas?
Just try to hide the audio tag using CSS display instead of hidden attribute:
<audio src="file/example.ogg" autoplay="true" loop="true" />
audio {
display: none;
}
Note: Audio and Video tags can played automatically only when they are muted. (beacause of user privacy)
<audio src="file/example.ogg" autoplay="true" hidden="true" loop="true" muted="true" />
I have added a text overlay with href link, its working with html5 video, but when i switch video in fullscreen mode, href link is not working, I can see the text(ui) in the fullscreen mode video, but unable to click.can anyone help me?
Jsfiddle
<video id="v" controls>
<source id='mp4'
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4'>
<source id='webm'
src="http://media.w3.org/2010/05/sintel/trailer.webm"
type='video/webm'>
<source id='ogv'
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="overlay">
This is HTML overlay on top of the video! </div>
thanks
I have a simple angular application that has an audio player integrated.
<audio id="passage-audio" class="passage" controls ontimeupdate="document.getElementById('tracktime').value = this.currentTime ;">
<source src="Luke.2.1-Luke.2.20.mp3" type="audio/mp3">
<em class="error"><strong>Error:</strong> Your browser doesn't appear to support HTML5 Audio.</em>
</audio>
the audio player has an event called "ontimeupdate", this will update the time in the html element with the id "tracktime". This works fine.
What i would like to do is to use "ontimeupdate" to invoke a function in the controller. Right now it is not has access to the class.
<audio id="passage-audio" class="passage" controls (ontimeupdate)="updateTime()">...
</audio>
I there a way to accomplish this?
If i write an audio directive will i be able to access this event?
Thanks
Try <audio ... (timeupdate)="updateTime()">
Not sure what you want, but if it is to update you angular app at each timeupdate, you can accomplish this by calling $scope.$apply() and passing a $scope function.
this is working fine for me
function onChangeAudio(event) {
var durration = event.srcElement.duration;
alert("call")
}
<audio controls class="w-100" id="audio" (timeupdate)="onChangeAudio($event)">
<source src="..." type="audio/ogg">
<source src="..... " type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The code snippet is given below. I have used impress.js to create an online presentation. I want to insert a video in the last slide which autoplays when the slide comes up. But I am unable to implement that. Can anyone please help me with this?
<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">
<video width="800" height="600" controls autoplay>
<source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
In impress.js, the DOM prevent video to autoplay, but you can use API, like this:
var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
video.pause();
}, false);
HTML:
<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
<video id="video" width="420" height="340" autoplay>
<source src="video/test.webm" type="video/webm">
</video>
</div>
With the code above, when you enter this step, the video will play automatically, and it will pause when you leave this step. Give it a try :)
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
It should work.
I would like to enter a url in a text box and be able to mirror that url to the video html.
Example url: http://www.example.com/video.mp4
I am thinking this should be possible using js.
This is how the html would originally look like
<input type="text" value="" />
<video width="320" height="240">
<source type="video/mp4" src=""/>
</video>
After entering the url the html would look like this.
<input type="text" value="http://www.example.com/video.mp4" />
<video width="320" height="240">
<source type="video/mp4" src="http://www.example.com/video.mp4"/>
</video>
I would then extend this to support all three video formats with three text fields.