Preplay image before the video plays
Posted By : Hema Chauhan | 09-Jan-2017
In HTML5 video tag is new features for uploading the video. Video tag is much more than simply an option to flash in the media and its capability and support different browsers have increased at an amazing speed.
Video tags provide the some controls like:- play , pause and volume. video files, including YouTube videos, are inserted into an HTML document using the tag.
In video tags src attribute defines that video file to insert into the page.
Write the below code in HTML :-
<!DOCTYPE html>
<html>
<head>
<title>HTML Video </title>
</head>
<body>
<video width="320" height="240" poster="https://www.oodlestechnologies.com/wp-content/webpc-passthru.php?src=http://player.progressionstudios.com/wp-content/uploads/2013/07/big_buck_bunny.jpg&nocache=1" controls>
<source src="http://player.progressionstudios.com/wp-content/uploads/2013/07/big_buck_bunny.mp4" type="video/ogg">
</video>
</body>
</html>
You can use a transparent poster image in combination with a CSS background same aspect ratio as my video. My width is set to 150% on the video tag and now the image (320 x 180) fits perfectly.
when we use poster attribute we cannot require the css and it works along the video tags.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Hema Chauhan
Hema is a bright UI designer, having knowledge of core php, HTML, CSS. Her hobbies are interacting with people, listening to music and dancing.