I am needing to download a video that is sourced from an HTML5 element. The issue is that I want the download button to be more visible.
<video controls disablepictureinpicture>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4">
</video>
<a href="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" download>
Download Video (not functional)
</a>
This code provides two download buttons.
One hidden in the button menu of the HTML5 Video Player.
Another attempted in the <a>tag.
The <a> tag navigates instead of downloads because of CORS.
Problem:
Is it possible for me to modify the <video> tag to make the download button immediately visible without having to download via the player's menu button?
Or for some javascript to click the download button from the media player?
I think you should create your custom video player UI, instead of modifying the video tag UI which is impossible as far as I know.
maybe you can try this third-part lib video.js
live demo
https://codepen.io/xgqfrms/pen/jOYKWPe
Related
I'm trying to add autoplaying music to a tumblr theme, but Chrome and Firefox both prevent autoplaying audio by default. How do I circumvent this?
Currently, to hear the autoplaying music, a user would have to change their personal browser settings to allow autoplay. Is there a workaround I can use to make the page play audio even if they have sound set to automatic (in Chrome) or autoplay blocked (in Firefox)?
Tumblr themes allow HTML, CSS, and Javascript, so I'd be happy for a solution using any of those. Ideally I would like my autoplay solution to allow multiple songs in a playlist, if possible.
I tried adding an invisible iframe, but that didn't work; I'm not sure whether it was the third-party audio player I'm using, or just that the iframe technique doesn't work at all anymore.
You can't circumvent auto-play from being blocked. There has to be some user interaction before the audio can play. This is the same for both HTML <audio> element as well as the web-audio API's audioContext
There's some reading about this on MDN Autoplay guide for media and Web Audio's API
You can try to play the audio on javascript onload.
Example:
HTML:
<audio controls id="horseAudio">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JavaScript:
window.onload = function (){
document.getElementById("horseAudio").play();
}
I do not think there is a way around autoplay being deactivated until there is user interaction. I was working on a project with similar problem and I decided to put a "begin" button on it to direct the user to click it. By clicking it (click event listener), they would have satisfied an interaction and it would then play my animations and audio.
On my site I have a variety of videos: (1) HTML5 videos AND (2) Vimeo. Both are set to autoplay and no controls. I need to create an alternative for browsers/devices that block those options.
Is there a script to detect when the video is blocked, and a way to replace it with a linked image or text instead?
I also wonder if I can have an audio icon that allows you to turn on/off the audio?
I have UIWebview contain video in the html ,I need to detect the first video in the html and play it.
Is there any trick in javascript or objective c to Autoplay the video when page finish loading ?
If the embedded video is not from Youtube, you must set your UIWebView to allow media playback without user action.
This can be done by setting the mediaPlaybackRequiresUserAction property of your UIWebView to false.
Example: self.webView.mediaPlaybackRequiresUserAction = NO;
If you've embedded a YouTube video, you can simply append &autoplay=1 to the end of the video url.
This will cause the video to autoplay on page load.
Click on inline Playback in storyboard
How can I make videos load after clicking play not before?
and
what is the best way, using HTML5 video tag or make a flash player?
use preload attribute in HTML video element. Enable the option after play is clicked using jquery.
You can pause a video using the pause() method:
$("#videoID").get(0).pause();
You can then resume the playback of the video using the play() method:
$("#videoID").get(0).play();
I'd like to click on an embedded youtube video using javascript (so the video plays automatically). I successfully simulated a click on a <div> like this:
function f(){
alert("hello");
}
<div id="someid" onmouseup="f();">
my text
</d>
document.getElementById("someid").onmouseup();
How can the above code be adapted to work with an embedded youtube video?
Just add &autoplay=1 to the link of the video in the <embed> tag.
If he does what you suggest the views on the embedded video won't count. I'm pretty sure he is asking his question because he is trying to find a way to get the video to autoplay and have youtube count the views at the same time.