We Keep Coding

Audio file does not play if it's hidden

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" />

How can I play a video in an inline onclick handler?

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>

Video not autoplaying inspite of using "autoplay" in the video tag of HTML

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.

Getting black screen when I load next video dynamically using JavaScript

I am trying to change videos dynamically in my web page using JavaScript. The first video (.mp4 format) file is playing well, but when I click the button to change the video, it is showing some black screen instead of playing next video.
I tried in many ways to solve this issue by reading many Stack Overflow articles, but it is still not working.
Could anyone please guide me to solve this issue?
My JavaScript code:
function vidSwap() {
var player = document.getElementById("player");
player.pause();
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
document.getElementById("mp4").src = "D:\movies\Telugu\movie2.mp4";
document.getElementById("ogg_src").src = "D:\movies\Telugu\movie2.ogg";
player.load();
player.play();
}
My HTML Code:
<video id="player" height="380" width="440" controls>
<source id="webm" src="D:\movies\Telugu\movie1.webm" type="video/webm" />
<source id="mp4" src="D:\movies\Telugu\movie1.mp4" type="video/mp4" />
<source id="ogg_src" src="D:\movies\Telugu\movie1.ogg" type="video/ogg" />
</video>
<br>
<br>
<input type="button" value="Next Video Clip" onclick="vidSwap()" />

Your problem is in the vidSwap function: When you're setting the src attribute of each of the elements, the backslashes in the strings you're using are being interpreted as escaped characters.
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
// ^^ ^^ ^^
You need to escape the backslash characters by adding an extra backslash before each (\\), like so:
document.getElementById("webm").src = "D:\\movies\\Telugu\\movie2.webm";
// Repeat for each string
Happy coding!

Add video link to video html

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.