I currently have this:
<video controls="" autoplay="" name="media"><source src="...." type="video/mp4"></video>
It turns out, that half of the video is cut out of the screen, and I can't fix it.
Also, if you could help with this too, I'd like to know how to play the video in javascript.
Thanks!
Here is what I tried vs what I am expecting:
You need to add attributes responsible for width and height.
As an example:
<video id="Test_Video" width="400" height="240" controls>
<source src="gfg.mp4" type="video/mp4">
</video>
the size is in pixels. If you want you can also specify it in % f.ex width="100%"
<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>
Thats what ive done so far
<div>
<iframe src="/music/song1.mp3" style="position:absolute;top:0;left:0;width:100%;height:100%;" width="1400" height="900" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
Thanks
Use the <audio> html element and add autoplay loop
<audio autoplay loop controls>
<source src="/music/song1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
See more about <audio> here
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