How to set the thumbnail image on HTML5 video? - html

Is there a way to set thumbnail image on HTML5 video?
I want to see some pictures before play.
My code looks like this:
<video width="470" height="255" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<object data="video.mp4" width="470" height="255">
<embed src="video.swf" width="470" height="255">
</object>
</video>
Thanks!

Add poster="placeholder.png" to the video tag.
<video width="470" height="255" poster="placeholder.png" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<object data="video.mp4" width="470" height="255">
<embed src="video.swf" width="470" height="255">
</object>
</video>
Does that work?

Display Your Video First Frame as Thumbnail:
Add preload="metadata" to your video tag and the second of the first frame #t=0.5 to your video source:
<video width="400" controls="controls" preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>

If you want a video first frame as a thumbnail, than you can use
Add #t=0.1 to your video source, like below
<video width="320" height="240" controls>
<source src="video.mp4#t=0.1" type="video/mp4">
</video>
NOTE: make sure about your video type(ex: mp4, ogg, webm etc)

I found the solution that I got from your example and other examples and made ​​this:
<video id="video1" width="470" height="264" poster="video_poster.jpg" onclick="playPause()">
<source src="video.mp4" width="470" height="264" type="video/mp4" >
<source src="video.webm" type="video/webm" >
<source src="video.ogv" type="video/ogg" >
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="264" >
<param name="movie" value="video.swf" >
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="11.0.0.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../../Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="video.swf" width="500" height="500">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="11.0.0.0">
<param name="expressinstall" value="../../Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
Unfortunately Your browser is old and does not support full video experience.
</object>
</video>
<script>
var myVideo=document.getElementById("video1");
var att=document.createAttribute("poster");
if (myVideo.error) {
switch (myVideo.error.code) {
case MEDIA_ERR_NETWORK:alert("Network error - please try again later.");break;
case MEDIA_ERR_DECODE:alert("Video is broken.."); break;
case MEDIA_ERR_SRC_NOT_SUPPORTED:alert("Sorry, your browser can't play this video."); break;
}
}
else
{
function playPause()
{
if (myVideo.paused)
{
myVideo.play();
att.value="";
myVideo.setAttributeNode(att);
}
else myVideo.pause();
}
}
</script>
Fantastic work. Thanks!

<?php
$thumbs_dir = 'E:/xampp/htdocs/uploads/thumbs/';
$videos = array();
if (isset($_POST["name"])) {
if (!preg_match('/data:([^;]*);base64,(.*)/', $_POST['data'], $matches)) {
die("error");
}
$data = $matches[2];
$data = str_replace(' ', '+', $data);
$data = base64_decode($data);
$file = 'text.jpg';
$dataname = file_put_contents($thumbs_dir . $file, $data);
}
?>
//jscode
<script type="text/javascript">
var videos = <?= json_encode($videos); ?>;
var video = document.getElementById('video');
video.addEventListener('canplay', function () {
this.currentTime = this.duration / 2;
}, false);
var seek = true;
video.addEventListener('seeked', function () {
if (seek) {
getThumb();
}
}, false);
function getThumb() {
seek = false;
var filename = video.src;
var w = video.videoWidth;//video.videoWidth * scaleFactor;
var h = video.videoHeight;//video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
var data = canvas.toDataURL("image/jpg");
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
}
}
xmlhttp.open("POST", location.href, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
}
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
console.log('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
console.log('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
console.log('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
console.log('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
console.log('An unknown error occurred.');
break;
}
}
</script>
//Html
<div>
<video id="video" src="1499752288.mp4" autoplay="true" onerror="failed(event)" controls="controls" preload="none"></video>
</div>

That seems to be an extra image being shown there.
You can try using this
<img src="/images/image_of_video.png" alt="image" />
/* write your code for the video here */
Now using jQuery play the video and hide the image as
$('img').click(function () {
$(this).hide();
// use the parameters to play the video now..
})

1) add the below jquery:
$thumbnail.on('click', function(e){
e.preventDefault();
src = src+'&autoplay=1'; // src: the original URL for embedding
$videoContainer.empty().append( $iframe.clone().attr({'src': src}) ); // $iframe: the original iframe for embedding
}
);
note: in the first src (shown) add the original youtube link.
2) edit the iframe tag as:
<iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s?autoplay=1" frameborder="0" allowfullscreen></iframe>
note: copy paste the youtube video id after the embed/ in the iframe src.

You need to use poster attribute in your video tag :
src="example.com"
poster="/video-thumbnail.png"

Related

Video Buffering Customization for background video in a page

I am creating a page having a video in background with HTML5.
I want to play the video after it buffered 70%. So that once the user play the video the video should not buffered.
Any one have a solution for this ?
Here is my code for video:
<div class="container">
<video id="video" poster="data:image/gif,AAAA" width="64" height="64" autoplay loop muted="muted" volume="0">
<source src="video/video1.mp4" type="video/mp4">
<source src="video/video1.ogv" type="video/ogv">
<source src="video/video1.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
I have tried some java script also
<button onclick="myFunction()" id="myButtonId" type="button">Get first buffered range</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function myFunction() {
alert("Start: " + vid.buffered.start(0) + " End: " + vid.buffered.end(0));
document.getElementById("myButtonId").click();
if(vid.buffered.end(0)>40){
vid.autoplay = true;
vid.load();
}
}
</script>
Thanks in advance !!!!

video html5: Is it possible to display thumbnail from video on a specific time?

I use this to have a video player on browser
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Before clicking play, it display an image from the very beginning of the video, but in most of my video, first several seconds is black screen. Is it possible to make it get image at a specific time of the video, like "0:00:15", without creating thumbnail for the video?
I just want to add one more thing in this I guess you forgot to add preload="metadata" attribute in video tag like the below
<video preload="metadata" width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
and one more thing I want to add that this will not starts video after 15 seconds, this will only take an screenshot from video and make it as a first view of the video
Maybe this helps: (I have not tested it. Also you might be able to set the "poster" attribute of the video to the src of the image object. Just try it. =) )
<video width="320" height="240" controls id="video">
<source src="video.mp4" type="video/mp4">
</video>
$(document).ready(function() {
var time = 15;
var scale = 1;
var video_obj = null;
document.getElementById('video').addEventListener('loadedmetadata', function() {
this.currentTime = time;
video_obj = this;
}, false);
document.getElementById('video').addEventListener('loadeddata', function() {
var video = document.getElementById('video');
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL();
$('#thumbnail').append(img);
video_obj.currentTime = 0;
}, false);
});
Source 1
Source 2
Using the poster attribute is the easiest way to go. Getting a preview image of the video from a time other than the start is exactly what its designed for.
http://www.w3schools.com/tags/att_video_poster.asp
Trying to create a function to dynamically grab another segment of the video to use as the poster will undoubtedly create more latency and overhead for the client, negatively affecting the UX.
I did it this way:
It jumps to 0 if the currentTime is 15, but will go over the 15s mark when played
html:
<video id="video1" src="path/to/video#t=15" onplay="goToStart()" controls ></video>
javascript:
function goToStart(){
if (document.getElementById('video1').currentTime == 15){
document.getElementById('video1').currentTime = 0;
}
}
Add #t=15 to your video source, like below
<video width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
This will starts video after 15 seconds.

GWT : removeAttribute didnt work?

I am trying to change / remove my video which is in my start.html
<video id="video" preload="auto" autoplay="true" loop="loop"
muted="muted" volume="0">
<source
src="clip0012.mp4" type="video/mp4">
</video>
I am calling this :
Element elem = DOM.getElementById("video_background");
elem.getFirstChildElement().removeAttribute("src");
elem.getFirstChildElement().setAttribute("src", "clip0022.mp4");
i get no error etc. the video clip0012 is still shown , but why?
Try this one (See comments for more information in code):
java:
//Get old Video Element
Element oldVideoElement=RootPanel.get("video").getElement();
//Create a new Video Element
VideoElement newVideoElement=Document.get().createVideoElement();
newVideoElement.setId("video");
newVideoElement.setPreload("auto");
newVideoElement.setAttribute("autoplay","true");
newVideoElement.setAttribute("loop","loop");
newVideoElement.setAttribute("muted","muted");
newVideoElement.setAttribute("volume","0");
//Create a new Source Element
SourceElement sourceElement = Document.get().createSourceElement();
sourceElement.setSrc("movie.mp4");
sourceElement.setType("video/mp4");
//Append new source Element in new video Element
newVideoElement.appendChild(sourceElement);
//Append new video element in video div
RootPanel.get("videoDiv").getElement().appendChild(newVideoElement);
//remove old video element from its parent
oldVideoElement.removeFromParent();
html:
<div id="videoDiv">
<video id="video" preload="auto" autoplay="true" loop="loop"
muted="muted" volume="0">
<source src="clip0012.mp4" type="video/mp4">
</video>
</div>
Use this instead:
DOM.getElementById("video").setAttribute("src", "clip0022.mp4");

Turning off closed caption on HTML5 video by default

Here's what I have...
<video id="video" controls="controls" preload="metadata" poster="/video/promotional/transparent.png">
<source src="/video/promotional/promotional.mp4" type="video/mp4" />
<source src="/video/promotional/promotional.webm" type="video/webm" />
<source src="/video/promotional/promotional.ogv" type="video/ogg" />
<track src="/video/promotional/promotional.vtt" label="English Captions" kind="subtitles" srclang="en-us" />
</video>
<script type="text/javascript">
$(document).ready(function() {
var video = document.querySelector('#video');
var.track = video.textTracks[0];
track.mode = 'hidden';
});
</script>
I was hoping this would turn off closed caption by default, but it doesn't seem to be the case. Any ideas?
your answer was very close (I assume var.track = was a typo - fixing that works in Chrome and Safari on OSX and IE on PC for me). For re-use I like to split the textTracks out into a variable, but that's personal preference:
<script type="text/javascript">
$(document).ready(function() {
var video = document.querySelector('#video'); // get the video element
var tracks = video.textTracks; // one for each track element
var track = tracks[0]; // corresponds to the first track element
track.mode = 'hidden';
});

Playing multiple sounds in Chrome

I am developing a HTML5 game for Facebook. I have the following HTML code:
<audio style="visibility: hidden;" controls="controls" id="sound-0">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-1">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-2">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-3">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-4">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-5">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
And the following Javascript that starts the sounds:
if (this.hitFlag > 6) this.hitFlag = 1;
var soundElem = document.getElementById('sound-' + (this.soundFlag % 6) + '0' );
soundElem.play();
Each click of the mouse triggers a sound event. The problem is with Chrome where after dozen of clicks the sounds disappear or start playing with quite a big delay(a dozen of seconds).
But there is no problem when playing in FF or Opera.
It's definitely a bug, but I think it has to do with the actual element and not the sound playing portion. You can easily get around this by preloading your audio, instantiating a new audio object for each playing of a sound, then finally checking the sound objects at each tick to determine whether or not they've finished playing so you can clean up memory.
Preloading is, of course, something like:
var _mySnd = new Audio('my/snd/file/is/here.mp3');
Instantiating is like:
var _sndCollection = [];
var n = _sndCollection.length;
_sndCollection[n] = new Audio();
_sndCollection[n].src = _mySnd.src;
_sndCollection[n].play();
And the cleanup check would be:
for (var i = 0; i < _sndCollection.length; i++)
{
if (_sndCollection[i].currentTime >= _sndCollection[i].duration)
{
_sndCollection.splice(i, 1);
i--;
}
}
I use something like this in my own HTML5 game engine, and it's worked perfectly thus far.