HTML Video Properties Tutorial

html video code

controls: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video> autoplay: <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video> autoplay muted: <video width="320" height="240" autoplay muted> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>

How it Works

1. The controls attribute adds video controls, like play, pause, and volume.
2. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
3. The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

Browser Support

html Video - Media Types

html Video - Methods, Properties, and Events

1. The HTML DOM defines methods, properties, and events for the <video> element.
2. This allows you to load, play, and pause videos, as well as setting duration and volume.
3. There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

<button onclick="playPause()">Play/Pause</button> <button onclick="makeBig()">Big</button> <button onclick="makeSmall()">Small</button> <button onclick="makeNormal()">Normal</button> <video id="video" width="420"> <source src="Baby-Jane.mp4" type="video/mp4"> <source src="Baby-Jane.ogg" type="video/ogg"> </video> <script> var myVideo = document.getElementById("video"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script>

All Basic HTML5

HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.

All Basic CSS3

CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general.

js JAVASCRIPT

Javascript is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.

CREATIONS

In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site. You can get them ready-made with Netbax creations or create them yourself as you wish with the help provided by the Netbax editor.

NAVIGATION Bar

having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find.

WEB BUTTONS

Collection of hand-picked free HTML and CSS button code examples.In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS.You are free to copy, modify and use this code as you wish.All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.