Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Programming Scripts Articles
Page 9 of 33
How to draw grid using HTML5 and canvas or SVG?
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 MoreHTML 5 video or audio playlist
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; }
Read MoreConverting video to HTML5 ogg / ogv and mpg4
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 MoreHow to find the size of localStorage in HTML?
localStorage is used to persist information across multiple sessions. It has a maximum size of 5MB.ExampleYou can try to run the following code snippet to check the size allocated −var sum = 0; // loop for size for(var i in localStorage) { var amount = (localStorage[i].length * 2) / 1024 / 1024; sum += amount; document.write( i + " = " + amount.toFixed(2) + " MB"); } document.write( "Total = " + sum.toFixed(2) + " MB");
Read MoreHow to apply antialiasing in HTML5 canvas drawImage()?
For antialiasing, you need to set resampling quality.ctx.imageSmoothingQuality = "low|medium|high"Use an off-screen canvas to reduce the image to half −var c = document.createElement('canvas'), ocx = c.getContext('2d'); c.width = img.width * 0.5; c.height = img.height * 0.5; ocxx.drawImage(img, 0, 0, c.width, c.height);// drawing images reducing to half again and repeating itocx.drawImage(c, 0, 0, c.width * 0.5, cc.height * 0.5);
Read MorePlay local (hard-drive) video file with HTML5 video tag?
The tag is used to add video, with the following video formats − MP4, WebM and OggOn selecting a file via the input element.The change event is firedThe event is fired for , , and elements when a change to the element's value is performed by the user.Getting File objectThe File interface provides information about files and allows JavaScript in a web page to access the content. Object of this type is returned by the files property of the HTML element, which eventually lets you access the list of files selected with the element.Object URL pointing ...
Read MoreHow to stream large .mp4 files in HTML5?
Video files on the web sometimes need to be encoded in a special way in order for them to be played while downloading. In order for flash-based videos to work, data should be moved from the end to the start of the stream. A program called mp4 FastStart can do this for you.Programs like HandBrake have a "web" option that also does this when encoding. You need to ensure that your web server is not applying to gzip or deflate compression on top of the compression in the mp4 file.Compression allows your webserver to provide smaller file sizes, which load ...
Read MoreHow to set all the border bottom properties in one declaration in JavaScript DOM?
To set the border bottom properties in one declaration in JavaScript, use the borderBottom property. It allows you to set the border-bottom-width, border-bottom-style, and border-bottom-color.ExampleYou can try to run the following code to learn how to set border bottom properties −Live Demo #box { border: 2px dashed blue; width: 120px; height: 120px; } Set border bottom color Demo Text Demo Text function display() { document.getElementById("box").style.borderBottom = "thin dashed #000000"; }
Read MoreHow to get the value of the usemap attribute of an image with JavaScript?
To get the value of the usemap attribute of an image, use the useMap property. You can try to run the following code to display the usemap attribute value −Example var x = document.getElementById("myid").useMap; document.write("Usemap: "+x);
Read MoreHow to set the starting position of a background image in JavaScript DOM?
To set the starting position of a background image in JavaScript, use the backgroundposition property. It allows you to set the position of the image.ExampleYou can try to run the following code to learn how to set all the position of a background image with JavaScript −Live Demo body { background-repeat: no-repeat; } Click to Set background image function display() { document.body.style.backgroundImage = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg')"; document.body.style.backgroundPosition="top right"; }
Read More