Week1 MediaPlayer

Audio,Video dan SUBTITLE
Pada versi HTML sebelumnya, untuk menampilkan file video dan audio, video dan
audio hanya bisa ditampilkan jika browser terdapat tambahan plugin seperti flash dan
beda browser, beda plugin juga. HTML5 menyediakan elemen baru yang digunakan
untuk menampilkan file berupa video maupun audio melalui sebuah tag <video> dan
<audio>. Dengan begitu, anda bisa dengan mudahnya mengembed kedua tipe file
tersebut. Dan berikut penjelasannya.
A. Penjelasan Tag <video>
Kelebihan di dalam tag <video> adalah dalam browser tidak perlu menggunakan
flash player, dan buffering menjadi lebih ringan karena fasilitasnya sudah di
backing oleh kode HTML sendiri
Atribut Opsional :
Attribute Value Description
autoplay autoplay Menentukan bahwa video akan mulai
berputar otomatis
controls controls Menentukan kontrol video yang akan
ditampilkan (Contoh: tombol
play/pause)
height pixels Mengeset tinggi dari video player
loop loop Menentukan bahwa video akan
berputar kembali meski video telah
habis
muted muted Menentukan bahwa output suara akan
di mute / dihilangkan
poster URL Menentukan gambar yang akan tampil
ketika video masih belum berputar
preload auto Menentukan jika dan bagaimana kapan
metadata video ini harus menjalani proses
none loading ketika halaman terbuka
src URL Menentukan alamat URL dari mana
sumber video
width pixels Mengeset lebar dari video player
Politeknik Elektronika Negeri Surabaya 1

Contoh kode tag <video>
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" >

<source src="bbb.mp4" type="video/mp4" />
<source src="bbb.ogg" type="video/ogg" />
<source src="bbb.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
Output yang akan muncul dalam browser

<video width="320" height="240" controls="controls" >
ATTRIBUT OPSIONAL
B. Penjelasan Tag <audio>
Digunakan untuk memasukkan audio, misalnya lagu kedalam halaman web. Pada
HTML5, hal itu dipermudah dengan tag <audio>.
Atribut opsional :
Attribute Value Description
autoplay autoplay Menentukan bahwa audio akan
mulai berputar otomatis
controls controls Menentukan kontrol audio yang
akan ditampilkan (Contoh: tombol
play/pause)
loop loop Menentukan bahwa audio akan
berputar kembali meski audiotelah
habis
preload auto Menentukan jika dan bagaimana
metadata kapan audio ini harus menjalani
none proses loading ketika halaman
terbuka
src URL Menentukan alamat URL dari mana
sumber audio
Contoh tag <audio>

<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="multimedia/song.ogg" type="audio/ogg" />
<source src="multimedia/song.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</body>
</html>

Output yang akan muncul dalam browser

A. Mini Project
1. Multimedia Web
Berikutnya kita akan mencoba untuk membuat sebuah web multimedia berupa
pemutar video. Yang kita butuhkan adalah beberapa video berformat mp4,
kemudian plugin jquery yang digunakan untuk tampilan. Pertama kita buat
file index.php
<!DOCTYPE html>
<?php
if(isset($_GET['id'])){
$id=$_GET['id'];
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes"
/>
<meta name="apple-mobile-web-app-status-bar-style"
content="black" />
<title>
</title>
<link rel="stylesheet" href="jquery/jquery.mobile-
1.4.3.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="jquery/jquery.min.js">
</script>
<script src="jquery/jquery.mobile-1.4.3.min.js">
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="b" data-role="header">
<h3>
Video Gallery
</h3>
</div>
<div data-role="content">
<div id="container" align="center">
<video width="320" height="240"
controls="controls" autoplay="autoplay" >


<?php
if($id==""){
echo '<source
src="videos/Lighten - Week 03 - Character Idle
Animation.mp4" type="video/mp4" />';
}
else{
echo '<source
src="videos/',$id,'" type="video/mp4" />';
}
echo 'Your browser does not
support the video tag. ';
?>
</video>
</div>
<ul data-role="listview" data-divider-theme="a"
data-inset="true">
<li data-theme="c">
<a href="index.php?id=Lighten - Week 03 -
Character Idle Animation.mp4" data-transition="slide">
Lighten - Week 03 - Character Idle
Animation
</a>
</li>
<li data-theme="c">
<a href="index.php?id=Lighten - Week 05 -
Character Movement.mp4" data-transition="slide">
Lighten - Week 05 - Character
Movement
</a>
</li>
<li data-theme="c">
<a href="index.php?id=Untitled - Blob
Monster.mp4" data-transition="slide">
Untitled - Blob Monster
</a>
</li>
<li data-theme="c">
<a href="index.php?id=Untitled - Red Boy
Walk Animation 1.mp4" data-transition="slide">
Untitled - Red Boy Walk Animation 1
</a>
</li>
<li data-theme="c">
<a href="index.php?id=Untitled - Red Boy
Walk Animation 2.mp4" data-transition="slide">
Untitled - Red Boy Walk Animation 2
</a>
</li>
<li data-theme="c">
Politeknik Elektronika Negeri
<a href="index.php?id=Untitled Surabaya
- Dancing 6
Animation.mp4" data-transition="slide">
Untitled - Dancing Animation
</a>
</li>
</li>
<li data-theme="c">
<a href="index.php?id=Untitled - Dancing
Animation.mp4" data-transition="slide">
Untitled - Dancing Animation
</a>
</li>
<li data-theme="c">
<a href="index.php?id=Tamagizi - Week 04
- Sleep Animation.mp4" data-transition="slide">
Tamagizi - Week 04 - Sleep Animation
</a>
</li>
</ul>
</div>
</div>
</body>
Baris
</html>
Digunakan untuk menampilkan sebuah video berdasarkan nama id nya. Untuk

memanggil fungsi-fingsi dari jquery buat tampilan pada web, panggil file
jquery.mobile-1.4.3.min.css, jquery.mobile-
1.4.3.min.js, jquery.min.js yang ada di folder jquery.

Kemudian, untuk memanggil video kita gunakan tag <video>.
Untuk video lainnya, kita bisa memasangnya pada tag <ul> dan menggunakan
property data-role="listview" dimana property tersebut adalah
bawaan dari plugin jquery.
Jangan lupa untuk menyusun foldernya seperti gambar dibawah ini. Folder
videos berisi file-file video, kemudian folder jquery berisi file-file jquery,
sedangkan file index.php berisi barisan program seperti diatas.
Karena file index nya berupa php, maka kita harus menjalankannya lewat
localhost (misalnya xampp).

Tambahkan subtitle untuk video Anda

Introduction
Kami akan menambahkan subtitle ke video menggunakan teknologi baru yang masih
dikembangkan, tetapi menunjukkan harapan besar. Ini disebut WebVTT (Web Video
Text Tracks). Dengan WebVTT, kami dapat menyediakan subtitle, bab, dan lainnya -
semuanya dalam format yang sangat sederhana yang pada dasarnya adalah file teks,
seperti halnya HTML, CSS, dan JavaScript.
Video Software
The first step is to create the WebVTT file: call it subtitles.vtt. One of the requirements
for the VTT file is having
WEBVTT
at the beginning. Skip one line after this one.
You can easily add comments

NOTE This is a comment.
or multiline comments
NOTE
Multi-line comment.
Multi-line comment.
We can add cues beginning with an ID like this: 1. Then on the next line provide the
start and end times for the subtitle or caption:
00:00:01.000 --> 00:00:10.000
Below it, the subtitle itself:
Pouring coffee into a mug...
This creates a subtitle that should appear from the first second to the tenth second of
the media.
Custom Video Controls
We now have to load this file and attach it to the video. That's done using the track tag:
<div class="video">
<video controls preload="auto" poster="media/poster.png">
<source src="media/video.webm" type='video/webm'>
<source src="media/video.mp4" type='video/mp4'>
<source src="media/video.ogv" type='video/ogg'>

<track src="subtitles.vtt" kind="subtitles" srclang="en"
label="English" default>
<p>
Your browser doesn't support HTML5 video playback.
You can <a href="media/video.mp4">download the video
instead</a>.
</p>
</video>
</div>
The src attribute points to file like in other HTML tags.

The kind attribute tells the browser the kind of file we are attaching with the VTT format.
Available kinds are subtitles, captions, chapters, description and metadata.
• Subtitles and captions provide text in other languages and are for deaf and hard-of-
hearing viewers.
• Chapters provides a chapters list for the video.Description can be used for description of
the video for search engines and forblind users.
• Metadata contains some system data that cannot be seen by the user.
For now, the most important kinds are subtitles and captions. If no kind is specified, the
browser will assume subtitles.
The srclang attribute indicates the language used in the file, employing the standard
code for language.
The label attribute assigns a label to the file, like "English" or "English subtitles".
The default Boolean attribute can used in one of the track tags to specify that the
default subtitles or captions to be shown.
With the code we typed in earlier, the subtitles should already be working in modern
browsers. However I personally couldn't make this work in Chrome using a local file like
this, so if you are using that browser, try uploading the file to a web server - then it
should work with no issues.

To add another cue, we just add two new lines, and repeat the process:
2
00:00:20.000 --> 00:00:27.000
Done!
Enjoy your coffee!
Note the line break here - it's going to affect the subtitle itself.
Media Element
We can add tags like b, i and u, like this:

2
00:00:20.000 --> 00:00:27.000
<b>Done!</b>
Enjoy your coffee!
This has support in Google Chrome and Firefox.
The special c tag can be used to add a custom CSS class like this:
2
00:00:20.000 --> 00:00:27.000
<b>Done</b>!
Enjoy your <c.example>coffee</c>!
Another special tag is the v tag used to specify the voice of a character. For example:
1
00:00:01.000 --> 00:00:10.000
<v Narrator>Pouring coffee into a mug...</v>
We can also set cue settings - this is beginning to have support in some browsers, like
Firefox, Chrome and Safari. With cue settings, we can change the size and position of
the subtitles. The settings come right after the end title of the cue, separated by a
space, like this:
1
00:00:01.000 --> 00:00:10.000 line:1 position:20% size:30% align:start
<v Narrator>Pouring <i>coffee</i> into a mug...</v>
Test this in the browser. You will see that the first subtitle appears in a different position
than the default one.

The line setting sets the vertical position of the subtitle. Positive numbers indicate
spacing from the top down; negative numbers from the bottom up.
The position setting indicates the horizontal position of the text. It's expressed in
percentage: 0% being the left of the video area and 100% the right of the video.
The size setting actually controls the width of the subtitles. For example width of 30% will
set the subtitles to occupy 30% of the video's width.
The align setting will set the alignment inside the size we just configured, or within the
video, if it's not set. Possible values are start or the left of the video; middle or center;
and, end or the right of the video or defined size.
vertical is used with languages that are written vertically, which would change the
behavior of the settings we've just discussed.

Week1 MediaPlayer

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Week1 MediaPlayer

Diunggah oleh

Hak Cipta:

Format Tersedia

Audio,Video dan SUBTITLE

A. Penjelasan Tag <video>

Politeknik Elektronika Negeri Surabaya 1

<video width="320" height="240" controls="controls" >

Output yang akan muncul dalam browser

Politeknik Elektronika Negeri Surabaya 2

B. Penjelasan Tag <audio>

Contoh tag <audio>

Politeknik Elektronika Negeri Surabaya 3

Politeknik Elektronika Negeri Surabaya 4

Politeknik Elektronika Negeri Surabaya 5

Digunakan untuk menampilkan sebuah video berdasarkan nama id nya. Untuk

Politeknik Elektronika Negeri Surabaya 7

Politeknik Elektronika Negeri Surabaya 8

Politeknik Elektronika Negeri Surabaya 9

You can easily add comments

Custom Video Controls

Politeknik Elektronika Negeri Surabaya 10

The src attribute points to file like in other HTML tags.

Politeknik Elektronika Negeri Surabaya 11

We can add tags like b, i and u, like this:

Politeknik Elektronika Negeri Surabaya 12

behavior of the settings we've just discussed.

Politeknik Elektronika Negeri Surabaya 13

Anda mungkin juga menyukai