Prismic embedded url for a video does not load - html

<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>

Related

difference between <video src=""> </video > and <video> <source> </video>?

Could you please explain me the difference between
<video src=""> </video>
and
<video>
<source src="">
</video>
?

By using <video> <source> </video>.
You can add multiple source elements.
Multiple source elements can link to different video files. The browser will use the first recognized format.
<video width="320" height="240" controls>
<source src=http://example.com/foo.webm type=video/webm>
<source src=http://example.com/foo.ogv type=video/ogg>
<source src=http://example.com/foo.mp4 type=video/mp4>
<source src=http://example.com/foo.3gp type=video/3gp>
Your browser does not support the video tag.
</video>

HTML5 video tags not working

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 local video in iframe

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

restrict the size of video in a site

We are using following code to display video in a site.
<a width="300" height="300" href="http://www.youtube.com/embed/FEqXWwPFusI">
Video is displaying by covering entire monitor size.
If i click on menu_video.jpg image, it's displaying video with full size.
But I want to display the video for specific space. [width ="300" height="300" ]
Suggest me to find solution.

Try This
<iframe src="http://www.youtube.com/embed/FEqXWwPFusI" width="300" height="300"></iframe>

You should use video tag . try this:
<video width="400" height="400" controls>
<source src="video file" type="video/mp4">
<source src="video file" type="video/ogg">
</video>

Try this code istead
<video width="300" height="300" controls>
<source src="http://www.youtube.com/embed/FEqXWwPFusI" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Source link
or try iframe
<iframe type="text/html"
width="300"
height="300"
src="http://www.youtube.com/embed/FEqXWwPFusI"
frameborder="0">
</iframe>
or refer this question for more

html5 video m3u8: How to auto play the video?

<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