I can play a video using an onclick function call (ex.1) but not using an inline clean call (ex.2). Why is that so?
ex1
<script>
function p()
{document.getElementById("myVideo").play();}
</script>
<video id="myVideo" width="100" height="100" controls loop>
<source src="movie.mp4" type="video/mp4">
</video>
<button onclick="p();">play</button>
ex2
<video id="myVideo" width="100" height="100" controls loop>
<source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById("myVideo").play();">play</button>
<button onclick="document.getElementById("myVideo").play();">play</button>
Your HTML attribute value is delimited with " characters, but you try to use " characters inside it to delimit the JS string literals.
Consequently, your attribute value is document.getElementById( (which is invalid JS which would be reported on the Console of the developer tools in your browser when you clicked the button) and myVideo starts a new attribute.
Use " or ' inside the attribute value.
Better yet, bind your event handlers with addEventListener (the prefered way since the late 1990s) instead of HTML.
Do not nest single quote and double quote. use one of the followings:
onclick='document.getElementById("myVideo").play();'
or
onclick="document.getElementById('myVideo').play();"
You can not use quotes inside other quotes.
I think this will work.
<video id="myVideo" width="100" height="100" controls loop>
<source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').play();">play</button>
Related
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>
I need to set a listener for a video on SurveyGizmo that allows me to execute a function when the video ends. The HTML is as follows:
<div class="mejs-mediaelement">
<video height="534" width="800" src="urlOfTheVideo" type="video/mp4"></video>
</div>
so far I've tried to do this but it is not working:
<script>
function trailerEnd() {
document.getElementByClassName('mejs-mediaelement').addEventListener('ended',alertThem);
function alertThem(e) {
alert('video has ended');
};
};
trailerEnd();
If video is immediate child element of .megs-mediaelement div, then you could select video element and add event to it like this.
mediaelement.js adds an extra wrapper around video tag, so using immediate child selector(>) won't work. Updated answer with decnendent selector. It should work now.
var videoBlock = document.querySelector('.megs-mediaelement video');
videoBlock.addEventListener('ended', trailerEnd, false);
function trailerEnd(){
console.log('video ended');
}
<div class="megs-mediaelement">
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/TAgs/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/TAgs/movie.ogg" type="video/ogg">
</video>
</div>
Alternative you could also just select the video by using var videoBlock = document.querySelector('video'); if there only one video on the page.
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.