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();
Related
i'm trying to add autoplay audio in my html page and i already tried embed and audio with and without controls and optional attributes, and absolute path. Tried different formats, though i know that Opera supports .ogg. My last try is here:
<audio controls id="music1">
<source src="./models/laughing.ogg" type="audio/ogg"/>
</audio>
html page and audio file are located like this:
if i press play button audio is played, but when i start my entire project the button is covered (as should be). And anyway i want it to be autoplay so
My Opera is the last version, Windows
Autoplay doesn't typically work. You need some sort of user interaction, like a click.
There is nothing you can really do about this. It's a browser "feature" to prevent ads from playing audio in the background.
<audio controls autoplay>
Try adding "autoplay" inside the voice tag.
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 have a video on my website that I need to keep "locked" (visitors shouldn't be able to play/pause/forward).
I noticed that if I flip my phone the video goes full-screen and the OS takes control of it (it's no longer played by the inline html player, but instead is played by the OS player).
Any way to prevent that?
<video playsinline webkit-playsinline>
...
</video>
PS: I tried the playsinline attribute, but it didn't seem to work. At least not on the devices I tested.
Here iam opening a website which has several videos and all videos when playing are set by default to muted in the video tag.Example is given here
<video id="pbotplayer_html5_api" class="vjs-tech" poster="https://somename_1.jpg" muted="" preload="auto" autoplay="" loop="" src="https://somename_1.mp4" __idm_id__="-1787736063" controls=""><source src="https://somename_1.mp4" type="video/mp4"><p class="vjs-no-js"></a></p></video>
From this we can clearly see that the muted attribute is enabled by default and iam visiting this website in chrome.And i have even disabled Flash player in chrome://plugins but it does not work.
So all i wanted is to remove this muted attribute when ever a new video form this plays and there are large number of videos in this site and it is not easy to increase slide each time.
Here iam attaching how the controls look like.
We can see that the volume slider is 0 and each and every time we need to increase the slider,but manually it is difficult.
So any solution to this problem either by writing an script which runs everytime the webpage loads new video and it removes the muted attribute.
try with the following:
$("#video-id").removeAttr("muted");
this will remove the muted attribute of the targeted video, but you will need to run this code everytime you update it.
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