Use the accept attribute to set the types of files that the server accepts in HTML. Use the attribute only with .ExampleYou can try to run the following code to work with the accept attribute:              File Upload Box                                             The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device...is preferred.The capture attribute is NOT used to include the camera option in the dialog but to indicate that direct capture from the webcam is preferred.  The "correct" code is given below

The Web Audio API is used to control audio, which allows you to choose audio sources. You can also add effects; create audio visualizations, panning, etc.ExampleYou can try to run the following code snippet to generate sound −// use one context per document. Here we are creating one context for one document. You can create for other documents also var context = new (window.AudioContext || window.webkitAudioContext)(); // oscillator var os = context.createOscillator();   os.type = 'sine'; // sine is the default. So you can also use square, saw tooth, triangle os.frequency.value = 500; // setting the frequency Hz os.connect(context.destination); ... Read More

Add a button to play or pause the video. Then we have styled the video to a hundred percentage height and width so that it covers the entire background.The following is the code snippet to set video as a site background in HTML5.        Your browser does not support HTML5 video. The following is to pause the video −function display() {    if (video.paused) {       video.play();       btn.innerHTML = "Pause the video!";    } else {       video.pause();       btn.innerHTML = "Play";    } }

To convert video to ogg or mpg4, you need to use third-party software like Free HTML5 Video Player And ConverterAfter that, launch it and select input video files. Add files in any of the following formats −*.avi; *.ivf; *.div; *.divx; *.mpg; *.mpeg; *.mpe; *.mp4; *.m4v; *.webm; *.wmv; *.asf; *.mov; *.qt; *.mts; *.m2t; *.m2ts; *.mod; *.tod; *.vro; *.dat; *.3gp2; *.3gpp; *.3gp; *.3g2; *.dvr-ms; *.flv; *.f4v; *.amv; *.rm; *.rmm; *.rv; *.rmvb; *.ogv; *.mkv; *.ts.Now select the output location, click the “Browse...” button, and choose the location where the video would be saved.Select Presets, which are pre-configured. Select a player theme and click ... Read More

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: