Found 2202 Articles for HTML

Are there any style options for the HTML5 Date picker?

George John
Updated on 22-Nov-2023 04:25:09

2K+ Views

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; }

Apple Touch icon for websites in HTML

karthikeya Boyini
Updated on 24-Jun-2020 13:48:22

2K+ Views

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.

Is it autofocus=“ autofocus” or autofocus in HTML5?

Chandu yadav
Updated on 24-Jun-2020 13:31:55

107 Views

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 = "".

ffmpeg settings for converting to mp4 and ogg for HTML5 video

Samual Sam
Updated on 20-Nov-2023 12:25:08

2K+ Views

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

Is it possible to use JSF+Facelets with HTML 4/5?

George John
Updated on 24-Jan-2020 10:47:16

170 Views

Facelets is an open-source Web template system for JavaServer Faces (JSF). The language requires valid input XML documents to work. Facelets supports all of the JSF UI components and focuses completely on building the JSF component tree, reflecting the view for a JSF application.Facelets is a XML based view technology. It cannot be used with HTML4 doctype. You can use with JSF/Facelets, even without a declaration in top of the page.           Title               Header       Nav       Main       Footer    

AngularJS and HTML5 date input value - how to get Firefox to show a readable date value in a date input?

Ankith Reddy
Updated on 24-Jan-2020 10:46:12

271 Views

The elements of type date allows user to enter date, using a text box or using date picker. With the ng-model directive, bins the values of AngularJS application data to HTML input controls. Firefox does not currently support type="date". It will convert all the values to string. Sinceyou want date to be a real Date object and not a string, so we create another variable, and then link the two variables as done in the below given code function MainCtrl($scope, dateFilter) {    $scope.date = new Date();    $scope.$watch('date', function (date){       $scope.dateString = dateFilter(date, 'yyyy-MM-dd');   ... Read More

Play infinitely looping video on-load in HTML5

Arjun Thakur
Updated on 30-Jul-2019 22:30:22

5K+ Views

The tag specifies video. Currently, there are 3 supported video formats for the element that are MP4, WebM, and Ogg. Autoplay is used to start the video when the video and page loads.The loop attribute is a boolean attribute. When present, it specifies that the video will start over again, every time it is finished.The loop attribute should do it. Your browser does not support the video element. If you have a problem with the loop attribute, listen to the videoEnd event. After that call the play() method when it fires.

How to stream large .mp4 files in HTML5?

Chandu yadav
Updated on 24-Jun-2020 13:33:51

964 Views

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 More

Play local (hard-drive) video file with HTML5 video tag?

George John
Updated on 24-Jun-2020 13:36:36

1K+ Views

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 More

How to apply antialiasing in HTML5 canvas drawImage()?

Ankith Reddy
Updated on 24-Jun-2020 13:37:21

2K+ Views

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);

Advertisements