I created a page with a video in the background. It works great on desktop, but when I check it works on iPhone through the "Live Server" visual studio code add-on, it doesn't show the video, but displays the play icon. I tried everything I found on the internet. How can I make it disappear from the page on iPhone and the video starts automatically?
<video type="video/mp4" src="background.mp4" autoplay muted loop playsinline id="vid"></video>
Iphone page test
I tried to start the video with js method video.play(). It didn't work
Related
I have a simple video player, everything works perfectly except when the user open the player inside LinkedIn app browser it open in full screen mode
Is there any way to play a video inline on iPhone when using the in-app browser without going fullscreen?
Here is my HTML 5 video tag.
<video id="videoplayer" playsinline="1" webkit-playsinline="1" muted="" autoplay="" movieid="1" src="https://meed.audiencevideo.com/videos/mena.mp4?rand=0.16011310198007833" style="opacity: 1;" class="ended">
</video>
Note : solution can be using javascript or jquery etc
I want to make the video on HTML autoplays, given that Chrome prevents autoplay attr in HTML to play the video.
Here's my code :
<video id="video" width="400">
<source src="chess.mp4" type="video/mp4">
</video>
var vid = document.getElementById("video");
vid.autoplay = true;
vid.load();
The behavior is weird. First, I'm working on Eclipse and everything works perfectly fine on the eclipse browser.
When it comes to Chrome, the video sometimes works, sometimes need a clear-cache refresh to work... Not working with the first time opening the link. And now it's not working at all...
Any help?
You need to refer to Chrome Autoplay Policy Changes before you try any scripts.
Chrome's autoplay policies are simple:
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 their home screen].
Top frames can delegate autoplay permission to their iframes to
allow autoplay with sound
I want to use autoplaying videos on a mobile-only website.
So I am forced by some certain restrictions within google chrome (android app).
Then I want to programmatically change the source of the video to a different one.
(I tried two different aproaches, which both only work 50%)
V1:
This is the html I want to change:
<video id="overlayVideo" autoplay muted loop>
<source id="overlayVideoSrc" type="video/mp4"/>
</video>
This is my current code to change the source:
var $newVideo = $("<source>", {id: "overlayVideoSrc", "src": "index/RES/newVideo.mp4"});
$("#overlayVideoSrc").remove();
$("#overlayVideo").append($newVideo);
This plays the video on both mobile, and desktop, but doesnt change the source whatsoever. The video that plays is always the one, I selected in the first place.
V2:
Also tried:
<video id="overlayVideo" src="" autoplay muted loop></video>
Then I used the following:
$("#overlayVideo").attr("src", "index/RES/newVideo.mp4");
This changes and plays the video on desktop, but doesn't on mobile (changes but no playing)
I hope that you are able to follow, if there are any questions, please ask. I am really stuck.
After changing the src attribute
$("#overlayVideo").attr("src", "index/RES/newVideo.mp4");
You need to re-load(update after every change) and play the video:
$("#overlayVideo").load();
$("#overlayVideo").play();
I am implementing a video player using <video>. This is working in Chrome, Firefox, and Internet Explorer but is not working in Safari.
$("#vdsourceVideoPath").attr("src", "http://localhost:3000/Documents/upc and shelf info_0001.mp4");
var player = document.getElementById('vdTrainingVideoPlayer');
player.load();
player.play();
<video id="vdTrainingVideoPlayer" class="vdTrainingVideoPlayer" controls="controls" autoplay="autoplay">
<source id="vdsourceVideoPath" src="" type="video/mp4" />
</video>
player.load() and player.play() method are giving errors in Safari.
You could use the YouTube player
Use the youtube site to find the video you want
Click the 'Share' button below the video
Click the 'Embed' button next to the link they show you
Copy the iframe code given and paste it into the html of your web page.
Check out this link
This article gives a good run through of implementing a html5 video player
http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473
I have this page
http://joewillhelpyou.com
Users click the blue botton and a video page begins to play.
I have it simple. an iframe so the Jquery dows not mess with my tag that I found would not allow me to autoplay the next video, and 2 src for each video. In all the browswers they work okay, only one video is played back mp4 or webm. but in IE I keep hearing two playing back and I cannot figure out why
you can visit the page and tell me if you catch my mistake or a workaround for IE
<div id="videodiv">
<iframe src="http://joewillhelpyou.com/videos/step2/play02_01.html" width="1000" height="750"></iframe>
</div>
then this leads to a page where I have the video
<video controls autoplay width="936" height="624">
<source src="002_001.mp4" type="video/mp4">
<source src="002_001.webm" type="video/webm">
Your browser does not support the video tag.
</video>
under normal situations the code only plays one choce right? but in IE it seems to play 2 things at once, the rest of the browsers only sound out one track and that is what I want