On my wordpress site, when adding a video via the standard HTML Video tag, and then adding autoplay to it - when i then reload the page it sure autoplays but after a few seconds another instance starts the audio and then the audios are overlapping each other. How can i prevent this? This is my simple code.
<video width="400" controls autoplay>
<source src="/uploads/2018/04/ML_video-converted-with-Clipchamp.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Whats going on here?
Related
I'm using the Instagram API to pull posts to a website. If it's a video post I'm using (simplified)
<video id="id123" poster="img.jpg" controls>
<source id="id123" src="instagramURL.mp4" type="video/mp4">
</video>
The controls show in Safari but NOT in Chrome. So the poster image shows but there's no way to play the video unless I put in autoplay muted which mutes the video and, without controls, there's no way to turn on the audio.
How do I get the controls to show?
I have 5 videos in home page of my website, http://stg.ionhealingapp.com/. All videos are playing perfectly in all screen sizes. I have disabled controls and muted the video to start the autoplay. But, the only issue is with iPhone. When ever I am trying to play the videos other than the first video, the video is popping up and controls are visible. I don't want this to happen.
I can see that there is an option to disable "Auto-play video previews" from iOS13.
https://ios.gadgethacks.com/how-to/disable-auto-playing-video-previews-your-iphone-ios-13-0198401/
But couldn't find option to disable this in iOS12 and in earlier versions.
This is my video tag:
<video width="320" height="240" muted loop>
<source src="link to my video" type="video/mp4">
</video>
Is there any option to disable the preview popup from HTML end/iOS end?
I have a simple problem.
I want to use an image until the video downloads to cache. And after video download is finished, the video must autoplay. So, I used "poster" attribute for image. But now video autoplay is not working.
<video width="100%" height="100%" autoplay loop poster="img/loading.gif">
<source src="img/myvideo.mp4" type="video/mp4">
</video>
I don't want to use "controls" attribute. How can I solve this problem?
Could potentiality be this Google chrome disables autoplay
Chrome and i believe Firefox have disabled autoplay on websites. Users have to allow video's to be autoplayed.
I just finished reading this article on why autoplaying video is bad http://www.punkchip.com/autoplay-is-bad-for-all-users/. I knew autoplaying was a bad practice but this video gave me good, tangible reasons why its not a best practice.
My question, sites like YouTube, KickStarter and ProductHunt DO have autoplaying video, the catch is the audio is muted.
I'm working on a site for a client now, more specifically a page in which the client might request the video be autoplayed. Obviously this behavior would not be acceptable on with sound, but how about if I muted the sound by default and provided a volume button like ProductHunt?
And just replaced the video with a poster image on mobile? Thoughts?
Thanks.
If you will be using the HTML5 player native to the browser. HTML5 video does provide the ability to mute a video and autoplay it. You simply have to include the 'muted' and 'autoplay' properties in your video tags in addition to the 'controls' property so that users have the ability to play,pause, unmute etc, as an example, the code would look like this:
<html>
<body>
<video width="320" height="240" autoplay controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The muted attribute of the video tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.