Cara Memasang Artplayer Responsive di Blogger

Cara Memasang Artplayer Responsive di Blogger

Perkenalan

Halo Semuanya, Jumpa lagi dengan saya seonxnn. di postingan kali ini saya akan membagikan bagaimana cara Memasang ArtPlayer Responsive di blogger.

Apa itu Artplayer?

artplayer adalah player yang digunakan oleh platform streaming anime yang pastinya kalian kenal yaitu bstation

Kenapa harus Artplayer?

Menurut pribadi saya, artplayer memiliki tampilan yang stylish dan bersih, selain itu kalian bisa mengatur style artplayer mulai dari, pengaturan subtitel, resolusi, thumbnail, image in video dan lainnya. artplayer juga memiliki kecepatan pemutaran yang baik menurut saya, selain itu support menggunakan link google drive dan direct link mp4.

jika kalian penasaran dengan player nya kalian bisa mencobanya, untuk link demo kalian bisa liat dibawah, untuk cara pemasangan nya seperti biasa kalian bisa liat disini

Live Demo

Penting!
Sebelum Memulai Nya Ada Baiknya Kalian Memback-up Template Kalian Terlebih dahulu.

Source Code

<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>

<script>
var art = new Artplayer({
    container: '.artplayer-app',
    url: 'https://small.fileditchstuff.me/s16/LaPMAdSGqDTcjLVGdzjg.mp4',
    poster: 'https://image.tmdb.org/t/p/original/1MoXMLA1pEQNh9l61f9NsxndVM7.jpg',
    volume: 0.5,
    isLive: false,
    muted: false,
    autoplay: false,
    pip: true,
    autoSize: true,
    autoMini: true,
    screenshot: false,
    setting: true,
    loop: true,
    flip: true,
    playbackRate: true,
    aspectRatio: true,
    fullscreen: true,
    fullscreenWeb: true,
    subtitleOffset: false,
    miniProgressBar: true,
    mutex: true,
    backdrop: true,
    playsInline: true,
    autoPlayback: true,
    airplay: true,
    theme: '#e00741',
  
  quality: [
        {
          html: 'SD 360P',
            url: 'https://cdn.seonxnn.id/files/IYK-10-360p-SAMEHADAKU.CARE.mp4',
        },
        {
            default: true,
            html: 'SD 480P',
            url: 'https://small.fileditchstuff.me/s16/LaPMAdSGqDTcjLVGdzjg.mp4',
        },
        {
            html: 'HD 720P',
            url: 'https://small.fileditchstuff.me/s16/BkbIJIdITzZYXZZLNfq.mp4',
        },
    ],
  
  icons: {
        loading: '<img src="https://cdn.seonxnn.id/files/pngegg.png">',
        state: '<img width="150" heigth="150" src="https://cdn.seonxnn.id/files/pngegg.png">',
        indicator: '<img width="16" heigth="16" src="https://cdn.seonxnn.id/files/pngegg.png">',
    },
});

</script>
  <style>
    html,
    body {
        height: 100%;
        overflow: hidden;
        margin: 0; /* Menghapus margin default untuk memastikan halaman penuh */
    }

    .container {
        height: 100%;
        padding: 1px;
        box-sizing: border-box;
    }

    .artplayer-app {
        height: 100%; /* Mengisi tinggi penuh */
        width: 100%; /* Mengisi lebar penuh */
    }
</style>

Your_code_is_here

Kesimpulan

Diatas adalah Cara Memasang Artplayer Responsive di Blogger.Script diatas masih tahap awal, saya akan mengembangkan script nya jika menemukan ide baru untk menggunakan nya. Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :p