I'm making a portfolio at the moment, and I want an mp4 file running in the background.. I know how to get it to loop & repeat, but apparently i can't figure out how to do it at the same time..
Here is the code I'm trying to do it with
<div class="wrapper">
<div class="screen" id="screen-1" data-video="vid/NycTrafficH264.mp4">
<h1 class="video-title">#K Designs</h1>
<!--for Video autoplay-->
<video controls autoplay>
<source src="vid/NycTrafficH264.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
<!--For video loop-->
<video controls loop>
<source src="vid/NycTrafficH264.mp4" type="vid/NycTrafficH264.mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</div>
</div>
You just need to add the loop attribute to the same node. Try the below code:
<video controls autoplay loop>
<source src="vid/NycTrafficH264.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
I hope this is what you are looking for.
Related
Background video, for my website, is not playing on iPhone:
<video id="video">
<source loop="true" id="vid" src="assets/img/watch.mp4" type="video/mp4">
</video>
use muted and autoplay attribute in video tag
<video id="video" muted autoplay>
<source loop="true" id="vid"
src="assets/img/watch.mp4" type="video/mp4">
</video>
I have video
<div id="video" style="--aspect-ratio:3/1;">
<video autoplay muted loop>
<source src="fotky/video.mp4" type='video/mp4; codecs=" H.264/MPEG-4"'>
<source src="fotky/video.ogv" type="video/ogv" >
<source src="fotky/video.webm" type="video/webm" >
<p>Váš prohlížeč nepodporuje video</p>
</video>
</div>
And in IE 11 it does not show anything. I tried codecs like is described here. But not even type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' worked.
What can I do to make it work? Any different codec?
Edit:
<div id="video" style="--aspect-ratio:3/1;">
<video autoplay muted loop>
<source src="fotky/video.mp4" type="video/mp4">
<source src="fotky/video.ogv" type="video/ogv" >
<source src="fotky/video.webm" type="video/webm" >
<p>Váš prohlížeč nepodporuje video</p>
</video>
Try to remove codec and pass the type with in double quotation works on my side in IE 11.
<!doctype html>
<head>
</head>
<body>
<div id="video" style="--aspect-ratio:3/1;">
<video autoplay muted loop>
<source src="C:\Users\Administrator\Desktop\SampleVideo.mp4" type="video/mp4">
<source src="fotky/video.ogv" type="video/ogv" >
<source src="C:\Users\Administrator\Desktop\big-buck-bunny_trailer.webm" type="video/webm" >
<p>Váš prohlížec nepodporuje video</p>
</video>
</div>
</body>
</html>
Output:
<video poster="https://res.cloudinary.com/deesul/image/upload/v1482128248/Up_ci3qna.jpg" autoplay="true" loop preload="auto" >
<source src="https://res.cloudinary.com/deesul/video/upload/v1482630062/Up_1_ofz5ri.ogv" type="video/ogv">
<source src="https://res.cloudinary.com/deesul/video/upload/v1482126175/Up_srxisl.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="https://res.cloudinary.com/deesul/video/upload/v1482126174/Up_tle5de.mp4" type="video/mp4">
</video>
this is not displaying the poster nor the video in firefox. Please help me resolve this issue on firefox.
This is basic structure from MDN and W3C
<video width="600px" height="320px" class="video" controls poster="https://unsplash.it/598/320">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
I have embedded a video in html. here is the code
<div >
<video width="400" controls>
<source src="videos/myvideo.mp4" type="video/mp4">
</video>
</div>
i want to change the default thumbnail of the video. Any idea how to do that ?
Add poster="placeholder.png" to the video tag.
<video width="400" height="255" poster="placeholder.png" controls>
<source src="videos/myvideo.mp4" type="video/mp4">
</video>
I would like to ask if there is someway I can hide this rewind line from my webpage?
I have a website with fullscreen video and I would like to disable any kind of rewinding.
My code:
<video autoplay="true" loop controls muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
You can't hide only the video scroller. You can hide the entire controls panel:
Just lose the controls attribute from your <video> tag:
<video autoplay="true" loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>