04/05/17 | Mys2010 on Codepen

HomeArchives for 04/05/17

Pemutar Musik Mp3 Playlist

Memasang kode Pemutar Musik Mp3 Playlist
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template, ganti dengan kode blank template, yang tersedia pada sumber berikut ini : Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {
  background: #555;
}
body{
  font-family:verdana, arial;
}    
.mejs-list li:hover {
        background: #ffa;
        cursor: pointer;
    }
    .mejs-list li.current {
        background: #cddfff;
    }
.mejs-container{
  margin-left:auto;
  margin-right:auto;
}
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  padding:15px;
  -webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);} 
</style>

<font size="3" color="#5F9EAD"face="arial"> 
<div id="wrapper">
<audio id="mejs" src="../media/audio-01.mp3" type="audio/mp3" controls="controls"></audio>
<ul class="mejs-list">
<li  class="current"data-url="https://sites.google.com/site/studiedingsongmp3/laguku/Night-of-the-wolf-black-coach-ave-Sinitra-mys2010.mp3">01 - Music by - Night of the wolf</li>
<li data-url="https://sites.google.com/site/studiedingsongmp3/laguku/2-Pendulum-Resurrected-mys2010.mp3">02 - Music by - Pendulum - Resurrected</li>
<li data-url="https://sites.google.com/site/laguhiburan/mp3-1/ebonshire-mys2010.mp3">03 - Music by - Ebonshire Instrumental</li>

<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> 
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'>
</script> 
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>

<script>$(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mejsPlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mejs-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mejs:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mejsPlayNext(currentPlayer) {
    if ($('.mejs-list li.current').length > 0) {
        var current_item = $('.mejs-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mejs-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
} 
</script>

Code by. All Source
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload  Pemutar Musik Mp3 Playlist

Category: Pemutar Musik Mp3 Playlist

Pemutar Music Mp3

Memasang kode Pemutar Music Mp3
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template, ganti dengan kode blank template, yang tersedia pada sumber berikut ini : Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<div align="center" style="margin-top: 150px">
<audio id="mys2010" src="https://sites.google.com/site/studiedingsongmp3/laguku/2-Pendulum-Resurrected-mys2010.mp3" controls="controls"></audio></div>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>     
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> 
<script src='https://sites.google.com/site/codesule/lagu/stopExecutionOnTimeout-M2010.js'>
</script>

<script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}</script>

Code by. All Source
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

* If you want to directly copy and paste you canDownload  Kode Pemutar Music Mp3

Category: Pemutar Music Mp3

Embed Video Youtube with Border

Memasang kode Pemutar Video Embed Youtube
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template, ganti dengan kode blank template, yang tersedia pada sumber berikut ini : Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<!-- code -->
<div id="bgbawah" class="desain1">
<div class="container">
<div class="row">

<h2 align="center">
<font color='#191970'> METALLICA<br>
<font size="2" color="#0033CC"face="arial">Metallica Full Concert HD Quebec Magnetic Edited by. M2010 @ 2017</font>

 <script type="text/javascript">
//<![CDATA[
function embed(video) {
   document.write('<div style="text-align:center;background:linear-gradient(to bottom,#8E006B 0,#24006B 100%);border: 1px solid #444; border-radius:5px;margin:20px auto;width:80%;box-shadow:1px 30px 30px -26px #818181;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;"src="https://www.youtube.com/embed/wUPOWMx5Ac8/');
   document.write(video);
   document.write('" frameborder="0" allowfullscreen="1"></iframe></div></div>');
}//]]>
</script>
<script type="text/javascript">embed("Sule-M2010");</script>

Video by. All Source
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload  Video Youtube with Border

Category: Embed Video Youtube with Border

Pemutar Video Embed Youtube

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
.video {
  width: 560px;
  height: 315px;
  position: absolute;
 position: center;
  top:-46px;
 left: -4px;
  right: 50px;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
.text-bawah {
  position: absolute;
  right: 410px;
  bottom: 310px;  
font-size: 50px;
font-family: agency fb, sans-serif;
  text-transform: uppercase;
}
.text-bawah1 {
  position: absolute;
  left: 90px;
  bottom: 40px;
  text-align: left;
  text-transform: uppercase;}
.text-bawah2 {
  position: absolute;
  right: 90px;
  bottom: 40px;
  text-align: right;
  text-transform: uppercase;
} 
</style>

<!DOCTYPE html>
<!--[if IE8]><html id="ie8"><![endif]-->
<!--[if IE 9]><html id="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->

<div class="wrapper">
<article class="content">
<div class='video'>
</div>

<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

 <script>
    (function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width="560" height="315"src="https://www.youtube.com/embed/0PB6kzbS4zs" frameborder="0" allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });}};
}.call(this));  
  </script>

Video by. All Source
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

* If you want to directly copy and paste you canDownload  Play Video Embed Youtube

Category: Pemutar Video Embed Youtube

Pemutar Video Ogg HTML5

Memasang kode Pemutar Video Ogg HTML5
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template, ganti dengan kode blank template, yang tersedia pada sumber berikut ini : Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #000;
}
</style>

<section style="text-align:center">
       <button onclick="playPause()">Play / Pause</button>
       <button onclick="makeBig()">Besarkan Layar</button>
       <button onclick="makeNormal()">Normal</button>
       <button onclick="makeSmall()">Kecil</button>
        <br />
        <div align="center">
<video id="test">
<source src="https://sites.google.com/site/code6916/file/Cibeber-Cimahi-M2010s.mp4" type="video/mp4">
<source src="https://sites.google.com/site/usesitesto/file/Cibeber-Cimahi-ogg-M2010s.ogg" type="video/ogg">
</video>
</section>

<script type="text/javascript">
var myVideo=document.getElementById("test");
function playPause()
{
  if (myVideo.paused)
     myVideo.play();
 else
        myVideo.pause();
}
function makeBig()
{
    myVideo.width=840;
}
function makeNormal()
{
   myVideo.width=540;
}
function makeSmall()
{
    myVideo.width=340;
}
</script>

Video Ogg by. www.w3schools.com
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW AFTER

DEMOSHOW BEFORE

*  If you want to directly copy and paste you can Download  Play Video Ogg HTML5

Category: Pemutar Video Ogg HTML5

Mys2010 on Codepen

Pemutar Musik Mp3 Playlist

Pemutar Music Mp3

Embed Video Youtube with Border

Pemutar Video Embed Youtube

Pemutar Video Ogg HTML5

POPULAR

Blog Archive