butiran

show only youtube control

Dengan menggunakan player_api, suatu API YouTube, video yang ditanamkan pada suatu halaman web dapat dikendalikan dengan menggunakan tombol di luar obyek video [ 1 ]. Kemudian untuk hanya mengambil informasi audio dapat dirancang tombol kendali dengan iframe_api, API YouTube lainnya, yang cukup sederhana tampilannya [ 2 ], hanya sayangnya terdapat tautan yang tidak lagi bekerja untuk citra tombol tersebut. Bentuk panel kendali yang dilengkapi dengan tombol play, progress bar, dan pengaturan suara juga tersedia [ 3 ], akan tetapi belum berhasil dicoba. Selain itu terdapat cara lain yang menanamkan video dari YouTube dengan tag iframe dan kemudian membuat tag parent yang menutupi bagian videonya [ 4 ], di mana hal ini merupakan hal yang cerdik, akan tetapi hanya masih kurang bagaimana mengakses progress barnya. Untuk cara yang terakhir ini masih dapat dibantu dengan parameter-parameter yang disediakan oleh pemutar video YouTube yang ditanamkan pada suatu halaman web [ 5 ].

aim

Menanamkan audio yang berisikan narasi dari suatu artikel akan membantu pembaca yang telah lelah membaca dan hanya ingin mendengarkan saja. Adalah suatu pilihan wajar untuk meletakkan berkas audio tersebut pada suatu platform yang banyak digunakan orang seperti YouTube, yang sayangnya berkas audio perlu diubah menjadi berkas video agar dapat diunggah. Dan telah terdapat berbagai informasi untuk melakukan ini [ 6 ].

Audio yang dikonversi menjadi video umumnya disisipkan gambar atau animasi hanya sekedar agar tidak terlihat membosankan. Saat ditanamkan dalam suatu halaman web jenis video ini tidak perlu untuk dilihat karena informasi yang diperlukan adalah informasi suaranya, dan bukan informasi gambarnya.

css trick

Salah satu cara sederhana untuk menyembunyikan bagian video yang berasal dari YouTube adalah dengan menyisipkannya secara biasa menggunakan tag iframe akan tetapi diapit dengan tag lain div seperti berikut ini.

<div class="player">
   <iframe src="https://www.youtube.com/embed/taKBmcGrplo?autoplay=1&controls=1&showinfo=0&modestbranding=1">
	 </iframe>
</div>

Kemudian tampilan kedua tag iframe dan div di atas diatur dengan menggunakan CSS

<style>
.player {
  width: 390px;
  height: 35px;
  overflow: hidden;
  position: relative;
}

.player iframe {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2000px;
  border: none;
}
</style>

sehingga bagian atas yang berupa video dan progress bar menjadi tidak terlihat. Kedua kode di atas disisipkan dalam suatu berkas HTML.

Gambar 1. Hasil kedua kode sebelumnya dalam suatu halaman HTML.

Hasil penanaman suatu video dari YouTube dengan hanya menampilkan tombol kendali diberikan pada Gambar 1 dan dapat dijalankan. Untuk bug digunakan ukuran lebar 390px agar nyaman saat dilihat menggunakan devais mobile, terutama smartphone seperti Samsung Galaxy A12. Rekaman audio melalui video YouTube pada gambar sebelumnya direkam menggunakan XRecorder [ 7 ], yang saat in masih belum cukup nyaman digunakan karena perlu bersuara cukup keras agar terekam suaranya. Belum terbiasa dengan hal ini.

note

  1. Chris Coyier, “Play and Pause Buttons for YouTube and Vimeo Videos (via Their APIs)”, CSS-Tricks, 28 Jan 2014, url https://css-tricks.com/play-button-youtube-and-vimeo-api/ [20211207].
  2. the simple, Stephen Rauch, “Answer to ‘How to play audio only from youtube videos using HTML and javascript’”, Stack Overflow, 28 Feb 2018, url https://stackoverflow.com/a/49020767 [20211206].
  3. 350D, “Answer to’How to play only the audio of a Youtube video using HTML 5?’”, Stack Overflow, 28 Jul 2017, updated 27 Oct 2021, url https://stackoverflow.com/a/45375023 [20211206].
  4. chojnicki, “Asnwer to ‘Keep only progress bar and controls on an embedded YouTube video?’”, Stack Overflow, 11 Apr 2020, url https://stackoverflow.com/a/61163326 [20211206].
  5. “YouTube Embedded Players and Player Parameters”, Google Developers, 27 Apr 2021, url https://developers.google.com/youtube/player_parameters#IFrame_Player_API [20211206].
  6. Milica Popovic, “Create a video from Audio and Upload It to YouTube”, Videobolt, 26 Oct 2021, url https://blog.videobolt.net/post/create-video-from-audio-upload-to-youtube> [20211206].
  7. InShot Inc., “Screen Recorder - XRecorder”, version 2.1.1.1, Google Play, 29 Oct 2021, url https://play.google.com/store/apps/details?id=videoeditor.videorecorder.screenrecorder [20211206].

comments

 

comment twitter • mobile browser emulator • install node.js v16.13.1 x64 {% comment %} • {% endcomment %}