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 html audio/video control on my web page, like below code.
<audio controls>
<source src="somefolder/audio.mp3" type="audio/mpeg">
</audio>
<video width="350" height="250" controls>
<source src="somefolder/video.mp4" type="video/mp4">
</video>
When does the control start receiving audio/video file content from the server? Is it when I click on play button or it start receiving when I visit the page first time.
Audio and video tag load source when you visit page fisrt time. However, it's possible to lazy-load video, it will load only image and video will start loading when play button will be clicked. You can set it with attribute preload="metadata" in audio/video tag, e.g. if you have tag <video width="350" height="250" controls><source src="video.mp4" type="video/mp4"></video>, just add attribute <video preload="metadata" width="350" height="250" controls><source src="video.mp4" type="video/mp4"></video> and your video will start loading on play button click.
I have been looking into how to implement HTML5 videos as a
background
video on web and mobile, below is the following code-
it displays but not autostarts, this is the problem
<video width="100%" controls autoplay>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
Depending on your Chrome version you might get the new implementation of video autoplay rules:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Taken from: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So you can try it muted:
<video width="100%" controls autoplay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
I had similar issues with autoplay not having any effect regardless of usage of muted. Unexpectedly I had success when specifying autoplay as camel case autoPlay
In React you need to add the attributes of tags in camelCase. So in this case It has to be autoPlay.
It's too old thread now. But still I have a suggestion if you want to use.
Instead of the autoplay attribute(because other told it's only work always if it also has muted) you could use one thing:-
function playVideo()
{
document.getElementById("vid").play();
}
a very simple function in javascript. Make sure to give your video Id 'vid' or change it here. Video Example
<video id="vid" loop controls>
<source src="Videos/vid.mp4" type="video/mp4">
</video>
and in body tag write this:-
<body onpageshow="playVideo()">
It worked for me. Maybe for you too
Make sure you check browser permissions. If the site is not secure (http), then autoplay on websites will be disabled.
To make changes you can click on the left side of the Address Bar of the browser and click Allow audio and video.
Just change autoplay as camel case autoPlay
<video controls autoPlay loop muted>
<source src={myvideo} type="video/mp4"/>
<source src={myvideo} type="video/ogg"/>
Your browser does not support the video tag.
</video>
Had a similar issue. The fix is to camelCase autoPlay.
So the following should work:
<video autoPlay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
I created my html5 video section, but i'm using it to display video-ads before every video on my page.
The problem is that i want to show the video with only a big play button and the audio button, without the autostart (so the video can be played on every devices).
How to modify it?
My Code:
<video id="advvideo" controls width="100%" height="auto">
<source src="images/videos/promo.mp4" type="video/mp4" >
<source src="images/videos/promo.ogg" type="video/ogg">
video not supported
</video>
you can't control controls attribute of html5 <video> tag to change play button style.
For big play button you can upload your ad in youtube and use that youtube video with object or embed or iframe tag.
I prefer <iframe> tag.
Ex:
<iframe width="425" height="344" src="https://www.youtube.com/embed/F9Bo89m2f6g" frameborder="0" allowfullscreen></iframe>
How can I stop opening video in full screen in Safari? The video starts playing on click on the button, which shows only in browsers where autoplay video is forbidden.
Demo
add the playsinline property to your view, as described in https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
eg
<video autoplay preload="auto" playsinline controls>
<source src="....">
</video>