This question already has answers here:
Chrome video autoplay
(6 answers)
Closed 10 months ago.
How can I play an video element inside an iframe. The iframe is automatically creating the video element and controls. There are many answers here pointing to add &autoplay to the src address but this is not a youtube iframe.
My HTML code:
<button #click="playVideo(item.name)">play</button>
<iframe :ref="item.name" autoplay :src="item.video_link" :title='item.name'></iframe>
JS
playVideo(itemName) {
this.$refs[itemName] <--- this give me the iframe DOM element I want to play
},
Rendered HTML:
Since you have the source MP4, you should be using <video> instead of an iframe. You'll then have full access to autoplay, controls and other features.
Based on your code, this would look something like:
<video :ref="item.name" autoplay :title='item.name'>
<source :src="item.video_link" type="video/mp4">
</video>
And since IPFS can be a bit slow for first load, you can also specify poster to show a thumbnail while the content is loading. Here's an example using an IPFS source:
<h3>IPFS Embeded Video Demo</h3>
<!-- 👇 required for autoplay in Chrome -->
<video autoplay muted autopictureinpicture controls poster="https://i.stack.imgur.com/O9qG3.jpg?s=256&g=1" height="200">
<source src="https://ipfs.io/ipfs/QmbGtJg23skhvFmu9mJiePVByhfzu5rwo74MEkVDYAmF5T" type="video/webm">
</video>
Related
This question already has answers here:
Audio Tag Autoplay Not working in mobile
(4 answers)
Closed 4 months ago.
I am trying to make audio auto-play (without mute) on my website index page for Halloween effect. Tried all tricks given in the internet and Stack. Everything fails. But I found in W3Schools, tried on its page and it's working with auto-play. I am curious how it is working only on that website.
I used the same code:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
But not working for me in my site!
There source to check autoplay : here
another one here with js
How is it working for them and not for me?
You Cann't do it.
Please see https://developer.chrome.com/blog/autoplay/
and to play it only when the browser get a user gesture .
I am using html5 and while the video is downloading I am using a fallback image in poster attribute. but the problem is once the video is downloaded a flashy screen is showing for a short period of time. how can I remove this, so that the flash will not visible?
<video class="bg-video" loop="" muted="" autoplay="" playsinline="" poster="https://i3.ytimg.com/vi/Zs0bsagDzw8/maxresdefault.jpg">
<source />
</video>
live site:
https://nordic.dnscheck.io/
If you mean the black frame, it's in your video so you should edit it out from there.
If you really can't edit that file anymore you can still kind of workaround that by using the media fragment syntax and make your video automatically seek to after that black frame:
<video muted loop autoplay
poster="https://nordic.dnscheck.io/bilder/poster.webp"
src="https://nordic.dnscheck.io/nordic.webm#t=0.8"
></video>
However beware that the black frame will still be here at the next loop.
Also, while it's not an issue for you since you do autoplay the video, one should note that (currently) setting the seeking time through the media fragment syntax will disable the poster once the video has loaded.
I have a video background, which works fine - I have specified 3 different formats so the video background works in different browsers, however it appears my page is loading all 3 of the video backgrounds at the same time. This is slowing down my page massively!
Just wondering is there a way (using Javascript or jQuery) to detect the browser and load only 1 video background based on what browser is being used?
<div class="header-unit">
<div id="video-container">
<video autoplay loop muted class="fillWidth" id="bgvideo">
<source src="backgroundvideo.mp4" type="video/mp4">
<source src="backgroundvideo.ogv" type="application/ogg">
<source src="backgroundvideo.webm" type="video/webm">
</video>
</div>
</div>
This question already has answers here:
How to play audio?
(22 answers)
Closed 6 years ago.
Im looking to include some audio into a webpage which will be automatically played on command when some action is done. What is the easiest way to do this without having any physical play/pause buttons on the screen. If so, it it possible to do this just through javascript?
(I'm a beginner so please explain a little more in detail if you can!)
Thanks in Advance!
You can look into the HTML 5 audio tag
Omit the controls attribute to remove the physical play/pause. And add autoplay to make the sound play once it's loaded
Just add an audio tag in your html.. and link to where your audio file is:
<!DOCTYPE html>
<html>
<body>
<audio style="display:none" autoplay="autoplay" >
<source src="horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
use either mp3 or ogg files.
http://www.w3schools.com/html/html5_audio.asp
use html5 audio tag, with autoplay attribute, like this:
https://jsfiddle.net/grassog/odL69p59/
Use audio tag
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Play audio
</audio>
What I would like is to have a video play in full screen once and then disappear leaving the web page behind. is this possible using Javascript, HTML and possibly CSS?
The video in question is called Website Opening.mp4
<video width="100%" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4" />
</video>
Edit: When autoplay attribute is present, the video will automatically start playing as soon as it can i.e. when the page loads.