Blending Two Images with HTML5 Canvas

karthikeya Boyini
Updated on 29-Jan-2020 10:15:17

2K+ Views

To blend, you need to perform blending of two images in proportion 50-50.Let us see how: Blended image    window.onload = function () {       var myImg1 = document.getElementById('myImg1');       var myImg2 = document.getElementById('myImg2');       var myCanvas = document.getElementById("canvas");       var ctx = canvas.getContext("2d");       // width and height       var w = img1.width;       var h = img1.height;       myCanvas.width = w;       myCanvas.height = h;       var pixels = 4 ... Read More

Play HTML5 Audio Randomly

Samual Sam
Updated on 29-Jan-2020 10:14:38

991 Views

To play randomly, add the songs like this:init ([    'http://demo.com/songs/song1.mp3,    'http://demo.com/songs/song2.mp3,    'http://demo.com/songs/song3.mp3 ]);Use the following to play randomly using Math.random:function displayRandom() {    var audio = Math.floor(Math.random() * (collection.length));    audio = collection[audio];    audio.play();    setTimeout(loop,audio.duration*1000); }

Alternative to HTML5 iframe srcdoc

V Jyothi
Updated on 29-Jan-2020 10:14:05

745 Views

The srcdoc attribute specifies the HTML content of the page to show in the iframe. The HTML tag is used to create an inline frame.Alternative of the srcdoc attribute will be:var doc = document.querySelector('#demo').contentWindow.document; var content = ''; doc.open('text/html', 'replace'); doc.write(content); doc.close();

HTML5 IndexedDB Example

Sravani S
Updated on 29-Jan-2020 10:13:33

249 Views

The following function is an example of IndexedDB to add data:function add() {    var request = db.transaction(["employee"], "readwrite")    .objectStore("employee")    .add({ id: "001", name: "Amit", age: 28, email: "demo1@example.com" });    request.onsuccess = function(event) {       alert("Amit has been added to your database.");    };    request.onerror = function(event) {       alert("Unable to add data\rAmit is already exist in your database! ");    } }Above, we added the following details in the database:const employeeData = [    { id: "001", name: "Amit", age: 28, email: "demo1@example.com" }, ];

Example of createSignalingChannel in HTML5

Vrundesha Joshi
Updated on 29-Jan-2020 10:12:57

157 Views

Web RTC required peer-to-peer communication between browsers. This mechanism required signalling, network information, session control and media information. Web developers can choose different mechanism to communicate between the browsers such as SIP or XMPP or any two way communications. An example of createSignalingChannel():var signalingChannel = createSignalingChannel(); var pc; var configuration = ...; // run start(true) to initiate a call function start(isCaller) {    pc = new RTCPeerConnection(configuration);    // send any ice candidates to the other peer    pc.onicecandidate = function (evt) {       signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));    };        // once remote stream ... Read More

Attributes and Usage of Video Element in HTML5

Krantik Chavan
Updated on 29-Jan-2020 08:40:07

873 Views

The HTML5 and tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control:sr. No.Attribute & Description1AutoplayThis boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.2AutobufferThis boolean attribute if specified, the video will automatically begin buffering ... Read More

Creating Custom Attributes with HTML5

karthikeya Boyini
Updated on 29-Jan-2020 08:38:59

369 Views

A new feature introduced in HTML 5 is the addition of custom data attributes.A custom data attribute starts with data- and would be named based on your requirement.    ... The above will be perfectly valid HTML5 with two custom attributes called data-subject and data-level. You would be able to get the values of these attributes using JavaScript APIs or CSS in a similar way as you get for standard attributes.

Input Type URL in HTML5

Nancy Den
Updated on 29-Jan-2020 08:38:28

321 Views

This accepts only URL value in HTML5. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in https://www.qries.com format or in http://qries.com format.                    Enter URL :                    

Detect a Particular Feature through JavaScript with HTML

Nishtha Thakur
Updated on 29-Jan-2020 08:37:27

187 Views

Use Modernizr in HTML to detect a feature like audio through JavaScript:if (Modernizr.audio) {    /* properties for browsers that    support audio */ } else{    /* properties for browsers that    does not support audio */ }

Check Web Browser Support in HTML5

Smita Kapse
Updated on 29-Jan-2020 08:35:39

269 Views

You can try to run the following code to detect a web worker feature available in a web browser:           Big for loop                      function myFunction(){             if (Modernizr.webworkers) {                alert("Congratulations!! You have web workers support." );             } else{                alert("Sorry!! You do not have web workers support." );             }          }                     Click me     The following is the result:

Advertisements