<div id="small_cont1">
<video controls>
<source src="\Frontend\compileonline.mp4" type="video/mp4">
<!-- <source src="\Frontend\compileonline.mp4" type="video/ogg"> -->
Your browser does not support HTML video.
</video>
</div>
Everything is working fine - the control bar appears, the video gets downloaded but the video is not visible.
Related
This works fine on Chrome, but not on Safari.
<video id="video" class="video" preload="metadata" autoplay="" loop="" muted="" >
<source src="images/video.mp4" type="video/mp4">
</video>
The mp4 video's Codecs is H.264.
To play this video, I had to convert this mp4 to HEVC. Voila, this solved it!
<video id="video" class="video" preload="metadata" autoplay="" loop="" muted="" >
<!-- for safari - HEVC -->
<source src="images/video.mp4" type="video/mp4">
<!-- for chrome - H264 -->
<source src="images/video.mp4" type="video/mp4">
</video>
I added a couple of more lines of code because this background video wasn't playing on mobile(iphone chrome and safari)
<video id="video" class="video" preload="metadata" autoplay muted loop playsinline>
<!-- below is for safari - HEVC format -->
<source src="images/home-video.mp4" type="video/mp4">
<!-- for google - H264 format -->
<source src="images/hero-video.mp4" type="video/mp4">
<!-- for mobile -->
<source src="images/hero-video.webm" type="video/webm">
<source src="images/hero-video.ogg" type="video/ogg">
</video>
Now I'm having an issue with this video not playing on Android(Chrome).. smh
A nice and simple hack is to simply duplicate the file and make use of the .m4v extension at the end instead of .mp4 and use content type video/x-m4v instead of video/mp4.
example:
<video preload="metadata" autoplay="" loop="" muted="" >
<!-- for safari or iOS or anything Apple -->
<source src="images/video.m4v" type="video/x-m4v">
<!-- for chrome, firefox, android and remainig friends -->
<source src="images/video.mp4" type="video/mp4">
</video>
See: https://en.wikipedia.org/wiki/M4V
Here is my code of video tag but it is not working properly on page load, should i need any preloader to autoplay the video on page load`
<video id="video_player" width="100%" autoplay="1">
<source src="video/banner-video1.mp4" type="video/mp4">
</video>
If you just want to autoplay video:
<video id="video_player" width="100%" autoplay>
<source src="video/banner-video1.mp4" type="video/mp4">
</video>
Here is more about it: https://www.w3schools.com/tags/att_video_autoplay.asp
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>
Why I failed to play the 1st LINKED mp4 video but
success in 2nd LINKED mp4 video in firefox 45.0.2 (newest already)?
Chrome can play both successfully.
What's the problem?
<html>
<body>
<!-- Failed -->
<video width="320" height="240" controls>
<source src="http://video.appledaily.com.hk/admedia/20160413/12042016_int_09new_w.mp4" type="video/mp4">
</video>
<!-- Success -->
<video width="320" height="240" controls>
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
</video>
<!-- Success and the mp4 is downloaded from 1st link -->
<video width="320" height="240" controls>
<source src="12042016_int_09new_w.mp4" type="video/mp4">
</video>
</body>
</html>
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.