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.
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 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>
We are adding videos in our project by using tinyMCE file manager. Videos are uploaded and added with the code. But the problem is, after adding a video, we insert it into database and then it loses some html data.
For example, the line
<video width="300" height="150" controls="controls">
<source src="/allonkid/upload/pages/Kill Dil - Title Song (HQ Video) [FreshMaza.Info].mp4" type="video/mp4" /><br />
</video>
converts to the following line after a submit:
<video width="300" height="150" c>
<source src="/allonkid/upload/pages/Kill Dil - Title Song (HQ Video) [FreshMaza.Info].mp4" type="video/mp4" />
</video>
=> The controls="controls" is changed into c. Why does this happen?
PS: If I remove tinyMCE editor and put this into a simple textarea then I get the same result.
[Edit]
This is my text area definition:
<textarea name="pagebody" id="pagebody2" cols="30" rows="20" >
<?php echo $pageArray['body']; ?>
</textarea>
and my function
function updatepage() { pr($_POST); die; }