Why won't HTML5 video controls show in Chrome? - google-chrome

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?

Related

Html5 video lacks anti-aliasing?

I'm trying to add video to a portfolio site I'm working on, but it has this choppy quality to it, like it's lacking anti-aliasing.
Or it could be something else.. Does anybody have any clues?
It looks fine when I play it in a video player.
(Open the image in full view to see artifacts better)
Here's the code for the video tag:
<video width="100%" class="videoStyle" autoplay muted loop>
<source src="video/01-02.mov" type="video/mp4">
Your browser does not support the video tag.
</video>

How to prevent video preview popup in IOS for html videos

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?

Video not autoplaying when i use poster image

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.

HTML Video plays double when autoplay is enabled

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?

Latest IOS10 Autoplay Enable

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.