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" />
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 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 am trying to add a static image as fallback for video background in html 5 but not getting the output can anyone help.
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
<img src="/media/staticimage.jpg" title="Your browser does not support the <video> tag">
Video not supported
</video>
</div>
Check for you image path and replace the <video> tag in the title with < >
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
<img src="/media/staticimage.jpg"
title="Your browser does not support the <video> tag">
Video not supported
</video>
</div>
I suggest that instead of using an image inside the video area, you use a background image.
#video-bg-elem {background-image: url(media/staticimage.jpg);}
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
Video not supported
</video>
</div>
I am trying to display my Subtitles in video. I have mp4 video and ttml file for the video. When put it in html code, the video is playing but no subtitle is coming[Checked in chrome].
When I checked in IE11 it shows the CC option in the HTML5 video player but there also no subtitle is coming.
Here is what I have tried
http://jsfiddle.net/ilaiya/s49zessy/
<video controls autoplay height="400" width="400">
<source type="video/mp4" src="https://ccdpoc.blob.core.windows.net/asset-b82767bd-bf28-4e03-a2d2-329d6df2b633/Index.mp4?sv=2012-02-12&sr=c&si=107ca7bf-272e-48a9-b824-a48da8b7fe90&sig=o8PPGNFD6k0B7PMwdvZdjEy%2FuRc2r4urqqFd5GJyN2k%3D&st=2014-12-10T10%3A40%3A14Z&se=2016-12-09T10%3A40%3A14Z">
<track src="https://ccdpoc.blob.core.windows.net/sourceaes34/subtitle.ttml" label="English subtitle" kind="subtitles" srclang="en-us" default>
</video>
Chrome does not support TTML out-of-band text tracks. Currently, only WebVTT can be used inside of the element.
In general, Chromium is trying to remove XML from Blink: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/vXuOTK5M0hM.
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.