Ishni bajarish tartibi:
Multimedia teglari haqida qisqacha nazariy ma’lumot
Video va Audio teglariga misol keltirish
Natijani brauzerda tekshirish
Qisqacha nazariy ma’lumot
HTML5 dan oldin video faqat brauzer oynasida o'ynalishi mumkin edi (flesh kabi).
HTML5 <video>elementi videoni veb-sahifaga joylashtirish uchun standart usulni bildiradi.
Brauzerni qo'llab-quvvatlash
Jadvaldagi raqamlar <video>elementni to'liq qo'llab-quvvatlaydigan birinchi brauzer versiyasini bildiradi .
controls
Xususiyati Ijro, va hajmi kabi, video boshqaruvlari qo'shadi.
Doimo o'z ichiga olgan narsalar widthva heightsifatlarni kiritish yaxshi bo'ladi. Bo'shliq va kenglik o'rnatilmagan bo'lsa, video yuklanganida sahifa titragan bo'lishi mumkin.
Ushbu <source>maqola sizga brauzerdan tanlov qilishlari mumkin bo'lgan muqobil videofayllarni ko'rsatish imkonini beradi. Brauzer birinchi tan olingan formatdan foydalanadi.
O'rtasidagi matn <video> va </video>teglar faqat qo'llab-quvvatlash emas brauzerlar ko'rsatiladi <video>elementi.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Qoidalar</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Tarixi</a></li>
<li><a href="#">Chempionlar</a></li>
<li><a href="#">UBF</a></li>
</ul>
</div>
</div>
</nav>
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<h3 class="margin">Boks</h3>
<video width="400" controls>
<source src="bokser.mp4" type="video/mp4">
<source src="bokser.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Bu video Shohjahon Ergashevning instagram sahifasidan olindi.
<a href="https://www.instagram.com/shohjahonergashev_official/" target="_blank">(Shohjahon Ergashev instagram sahifasi)</a>.
</p>
<h3>Boks bu iroda va mehnatsevarlik!</h3>
</div>
<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
<h3 class="margin">Nega aynan boksni tanladingiz?</h3>
<p>Boks yoki pugilizm – bu faqat qo’lqopli qo’llar bilan kurashadigan jangovar sport, va sport qoidalari shunchalik zo’ravon va zolim emasligi uchun bir nechta qoidalar va qoidalarga ega.Boks 18-asrdan to o’n to’qqizinchi asrlarda Angliyada paydo bo’ldi, u yalang’och qo’llar bilan kurashdi, bu juda vahshiy va zo’ravon sport edi. </p>
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
<!-- Third Container (Grid) -->
<div class="container-fluid bg-3 text-center">
</body>
</html>
