ElaisCom: video

Memutar file video di web semua tentu sudah banyak yang mengerti. Bahkan sekarang sudah ada bawaan dari HTML5 yang sudah memutar video dengan kualitas yang baik.

Nah, Kali ini akan membagikan beberapa tips yang bisa anda pakai dalam meng-customize hasil video player/embed di html5 menggunakan javascript. Tepatnya menggunakan OSMPlayer.

OSMPlayer menggunakan jquey UI sehingga backgroundnya bisa diubah sesuai dengan thema yang tersedia di Jquery UI.

Oke, Berikut sintak yang digunakan

<!DOCTYPE HTML>
<html>
 <head>
  <title>Pemutar Dengan OSMPlayer</title>
  <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
  
  <script type="text/javascript" src="osmplayer/bin/osmplayer.compressed.js"></script>

  <link rel="stylesheet" href="osmplayer/jquery-ui/dark-hive/jquery-ui.css">

  <link rel="stylesheet" href="osmplayer/templates/default/css/osmplayer_default.css">
  <script type="text/javascript" src="osmplayer/templates/default/osmplayer.default.js"></script>
  
         <script type="text/javascript">

   $(function() {
    $("video").osmplayer({
      width: '100%',
      height: '400px'
    });
   });
  </script>
 </head>
<?php
echo"
 <body>
  
 <video src='dizzy.mp4' poster='dizzy.jpg' controls></video>
     
 </body>";
?>
 
</html>

Untuk mendownload lengkap dan dapat dijalan silahkan download DISINI. Jalankan di webserver yang digunakan oleh anda. karena file menggunakan bahasa pemrograman PHP.

[Read more]

Customize Video Streaming With Javascript