<video id="videoHTML5" class="video" width="100%" height="400" poster="img/poster.png" autoplay controls>
<source src="http://IP/live/stage.stream/playlist.m3u8" >
</video>
<script>
var vdo = document.getElementById('videoHTML5');
vdo.src = 'http://IP/live/stage.stream/playlist.m3u8';
vdo.load();
vdo.play();
</script>
NEVER starts ! I need to press the PLAY button on ipad and adroid !
Any idea on how to autostart an m3u8 video ?
reagards
you can try autoplay="true" in your code
Related
<video
controls
className={"w-full h-full object-contain"}
loop
autoPlay
muted
>
<source
src={videoUrl.embed_url}
type="video/mp4"
className={"relative z-[100000]"}
/>
</video>
If I put static(local) video src -> it works. But external video URL - doesn't.
What can cause this problem?
i would try creating a frame. and sorry im not sure of the cause of the problem
<iframe width="420" height="315" src="https://www.youtube.com"> </iframe>
Try this one:
<video
controls
className="w-full h-full object-contain"
loop
autoPlay=""
muted="muted"
playsinline=""
>
<source
src={videoUrl.embed_url}
type="video/mp4"
className={"relative z-[100000]"}
/>
</video>
I am trying to make a website where I have multiple videos on it. When I run the code, only the first video loads. No matter what I do, the second video will not play or load. Why doesn't my second video load?
Here's my code:
<html>
<head>
<title>Andrew soundboard!</title>
<style>
h1{
text-align:center;
}
</style>
</head>
<body>
<h1>Andrew Soundboard!</h1>
<br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3558.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3558.mp4">
</object>
</video>
<br>
FREAK OUT #1
<br><br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3559.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3559.mp4">
</object>
</video>
<br>
STOP IT!
</body>
</html>
There doesn't appear to be anything wrong with your code. So the possible issues are:
Is your video on your server (or if running on computer, in an accessible folder)?
Are you linking to your video correctly (in the right file, etc.)?
Does your video have the exact same file name as your HTML?
Does your video have the EXACT same file extension as your HTML? (.mp4, .mov, etc.)
Hope this helped!
How to disable auto-play for video when src is from my local pc?
<iframe width="465" height="315" src="videos/example.mp4"></iframe>
I have tried the following, but it doesn't work:
src="videos/example.mp4?autoplay=0"
src="videos/example.mp4?autoplay=false"
src="videos/example.mp4?autostart=0"
src="videos/example.mp4?autostart=false"
If you are using HTML5, using the Video tag is suitable for this purpose.
You can use the Video Tag this way for no autoplay:
<video width="320" height="240" controls>
<source src="videos/example.mp4" type="video/mp4">
</video>
To enable auto-play,
<video width="320" height="240" controls autoplay>
<source src="videos/example.mp4" type="video/mp4">
</video>
Try This Code for disable auto play video.
Its Working . Please Vote if your are done with this
<div class="embed-responsive embed-responsive-16by9">
<video controls="true" class="embed-responsive-item">
<source src="example.mp4" type="video/mp4" />
</video>
</div>
if you still need to use an iframe, add a sandbox
<iframe width="465" height="315" src="videos/example.mp4" sandbox></iframe>
Replace the iframe for this:
<video class="video-fluid z-depth-1" loop controls muted>
<source src="videos/example.mp4" type="video/mp4" />
</video>
What do you think about video tag ? If you don't have to use iframe tag you can use video tag instead.
<video width="500" height="345" src="hey.mp4" />
You should not use autoplay attribute in your video tag to disable autoplay.
You can use the Video Tag this way for no autoplay:
<iframe allowfullscreen="" frameborder="0" sandbox="" width="490" height="275" src=".../n1.mp4"></iframe>
Just replace
<iframe width="465" height="315" src="videos/example.mp4"></iframe>
by
<video src="videos/example.mp4" controls></video>
Here is an example using bootstrap 4:
<div class="embed-responsive embed-responsive-4by3">
<video src="videos/example.mp4" controls></video>
</div>
Try it.
src="videos/example.mp4?autoplay=1"
If you are using iFrame tag, remove the autoplay form the autoplay from allow property
<iframe
title=""
class="rounded-2xl w-full"
height="370"
src="Demo.mp4"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
You can set the source of the player as blank string on loading the page, in this way you don't have to switch to video tag.
var player = document.getElementById("video-player");
player.src = "";
When you want to play a video, just change its src attribute, for example:
function play(source){
player.src = source;
}
I've tried all the possible solutions but nothing worked for local video bindings. I believe best solution would be to fix using jQuery if you still wants to use iframes.
$(document).ready(function () {
var ownVideos = $("iframe");
$.each(ownVideos, function (i, video) {
var frameContent = $(video).contents().find('body').html();
if (frameContent) {
$(video).contents().find('body').html(frameContent.replace("autoplay", ""));
}
});
});
Note: It'll find all the iframes on document ready and loop through each iframe contents and replace/remove autoplay attribute. This solution can be use anywhere in your project. If you would like to do for specific element then use the code under $.each function and replace $(video) with your iframe element id like $("#myIFrameId").
<iframe width="420" height="315"
src="https://www.youtube.com/embed/aNOgO7aNslo?rel=0">
</iframe>
You're supposed to put the characters ?rel=0 after the YouTube video unique link and before the quotations. it worked for me
I have a web page where the top of the page is a fullscreen div with a background of a video. I also have, further down the page another video (for testing purposes the same video).
I have an interesting scenario to figure out...
Video 1 (at the top of the page) works perfectly on Firefox, Safari, Chrome, IE
Video 2 (half way down the page) works great on Firefox, Safari and IE. NOT Chrome
Due to the nature of my job I have to ensure that the websites I develop are browser safe. Does anyone know why 1 video would be working in Chrome but the other won't?
AT TOP OF PAGE
<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
<source src='img/video.mp4' type="video/mp4"/>
</video>
HALF WAY DOWN PAGE
<video id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
<source src="img/video.mp4" type="video/mp4" />
</video>
I also have this bit of DOM Javascript at the bottom of my page
<script>
document.getElementById('video').play();
document.getElementById('s-video').play();
</script>
I would guess (as there is not so much info here) there is a problem with the data being ready soon enough when play() is executed.
You could try to change the following things:
I the tags themselves, change preload to use auto
In the JavaScript, add listeners to the elements for the canplay event
Example:
<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}">
<source src='img/video.mp4' type="video/mp4"/>
</video>
<video id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}">
<source src="img/video.mp4" type="video/mp4" />
</video>
and
<script>
var video1 = document.getElementById('video');
var video2 = document.getElementById('s-video');
video1.addEventListener("canplay", start);
video2.addEventListener("canplay", start);
function start() {this.play()}; // "this" = current element calling
</script>
Update
This could also work if you want to have preload set to none:
<script>
var video1 = document.getElementById('video');
var video2 = document.getElementById('s-video');
video1.addEventListener("canplay", start);
video2.addEventListener("canplay", start);
function start() {this.play()}; // "this" = current element calling
video1.load(); // start loading video (metadata + data)
video2.load();
</script>
I am using a HTML video TAG to be able to show video on my website, I had enabled the function autoplay, but then the video would play on page reload. So I removed the autoplay function and I have:
<video width="600" height="315" style=" margin-bottom: 20px;" controls >
<source src="video/handi.mp4" type="video/mp4">
</video>
<script>
$('body').on('hidden.bs.modal', '.modal', function () {
$('video').trigger('pause');
});
</script>
This works well, but now when U open a modal to watch a video it will play but you have to click on start playing button and when u close the modal it will pause the video when you stopped it, if you open the same modal you can resume the video from when it was stopped.
Is there any function like auto play that when you open the modal it opens it and the video is played automatically and also I want to know if there is any reload function that when you u open any modal to watch the video it starts from the beginning not from where you stopped t.
With Refernce to the answers in this page,i've tried this for you..
Please try it..
HTML
<div id="simpleModal" class="modal">
<video id="videoContainer" controls autoplay width="560" height="315">
<source src="video/arch_1.mp4" type="video/mp4">
</video>
Close
</div>
Script
$(document).ready(function(){
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
$("#videoContainer")[0].play();
return false;
});
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer")[0].pause();
return false;
});
});
Hi according to w3schools.com if you remove the autoplay, it will stop the auto play. Here's the link to the school and code.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>