Use HTML with JavaScript to add playlist. The onended event fires when the audio/video has reached the end. You can add messages like “Thank you for watching”, “Stay tuned!”, etcExampleYou can try to run the following code to implement the onended attribute −                              Your browser does not support the video element.                      function display() {             alert ("Thank you for watching! Stay tuned!");          }           You could load the next clip in the onended event like in the below-given code    var next = "path/of/next/video.mp4";    var video = document.getElementById('video');    video.onended = function(){    video.src = next; }

In the below given example, we have first defined the width and height of the grid. Then we are defining the size of canvas and drawn gird into a canvas.//we are setting the grid width and height var grid_w = 200; var grid_h = 200; //we are setting padding around grid var gridp = 15; //we are defining size of canvas by defining its width and height var canvas_w = grid_w + (gridp*2) + 1; var canvas_h = grid_h + (gridp*2) + 1; var canvas = $('').attr({width: canvas_w, height: canvas_h}).appendTo('body'); var ctx = canvas.get(0).getContext("2d");Here is our method −function ... Read More

To clear a chart from canvas, delete the element and then append a new element to the parent container as in the below-given code −var resetCanvas = function(){    $('#results-graph').remove();      $('#graph-container').append('');    canvas = document.querySelector('#results-graph');    ct = canvas.getContext('2d');    ct.canvas.width = $('#graph').width(); // here we are resizing the new canvas element to parent width    ct.canvas.height = $('#graph').height(); // here we are resizing the new canvas element to parent height    var a = canvas.width/2;    var b = canvas.height/2;    ct.font = '12pt Calibri';    ct.textAlign = 'Align Left';    ct.fillText('left aligned ... Read More

For the browser to browser connection, follow the below-given steps −All the following library −Create a peer −For creating a peer, you need to get a free API key.var peer = new Peer('pick-an-id', {key: 'myapikey'});Connect −var conn = peer.connect('another-peers-id'); conn.on('open', function(){    conn.send('Welcome!'); });

The canvas always scales from its current origin. The default origin is [0, 0]. If you want to scale from another point, you can first do ctx.translate(desiredX, desiredY);. This will reset the origin of the canvas to [desiredX, desiredY].The translate() method remaps the (0, 0) position on the canvas. The scale() method scales the current drawing, bigger or smaller. If you want to translate() the canvas context by your offset, you need to first scale() it to zoom in or out, and then translate() back by the opposite of the mouse offset.These steps are given in the following examplectx.translate(pt.x, pt.y); ... Read More

Use the autofocus attribute to place the cursor in the text box when a page loads. The autofocus attribute is a Boolean attribute. When present, it specifies that an element should automatically get focus when the page loads. Here is an example −Example                    Name:          Subject:                    

The date picker in HTML5 shows a popup like a calendar. This is the same as selecting the months and years and this adds the date. Example: Style options for HTML date pickerYou can also customize the popup and add background color as well. You can try to run the following code to add style options for HTML date picker − ::-webkit-datetime-edit { padding: 4 em; } ::-webkit-datetime-edit-fields-wrapper { background:blue; } ::-webkit-datetime-edit-text { padding: 0 0.5em; } Editing a month, day and year field The following is to edit a month, day and year field − ::-webkit-datetime-edit-month-field { color: white; } ::-webkit-datetime-edit-day-field { color: red; } ::-webkit-datetime-edit-year-field { color: red; } ::-webkit-calendar-picker-indicator { background:gray; }

For web page icon on iPhone or iPad, use the Apple Touch Icon or apple-touch-icon.png file. This icon is used when someone adds your web page as a bookmark.For multiple icons with different device resolutions like iPhone or iPad, add sizes attribute to each link element as follows −Set size The icon with the appropriate size for the device is used.

As stated by w3.org −The autofocus attribute is a boolean attribute. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.In HTML, use boolean attributes with or without values. For W3C, autofocus can be easily written autofocus or autofocus = "autofocus" or,autofocus = "".

Convert videos to proper formats for HTML5 video on Linux shell using ffmpeg.When converting to an MP4, you want to use the h264 video codec and the aac audio codec because IE11 and earlier only support this combination.   ffmpeg -i input.mov -vcodec h264 -acodecaac -strict -2 output.mp4In this example, input.mov is converted to output2.mp4 with maximum compatibility, with Quicktime support, and without an audio stream. ffmpeg -an -i input.mov -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 output2.mp4For Firefox compatible ogg video,  ffmpeg2theora should be installed.  Here the input file is output file from the ffmpeg conversion done before. ... Read More