# 網頁內嵌 vimeo 並自動播放
### 情境
某些常用瀏覽器無法在網頁中自動播放未靜音的影片檔，但客戶有時需要開啟網頁就有影片＋聲音。
此時有一解法：影片檔靜音即可自動播放，並另外載入 mp3 音檔，開啟時自動播放。
因自動播放音檔```<audio>```在許多瀏覽器中也不允許，本次找到一個 JQuery 套件處理該情況。

PS: 本範例使用 vimeo，因為可以隱藏所有控制項目，適合在網頁中一直loop。

## 運行範例
[點我看範例](https://qbtzuuxsbvepyrs0fcmybq.on.drv.tw/NoteDemo/audio%26film-autoplay/audio8.html)
## Code
### html

<div style="position: relative; background-color: black; display: inline-block;">
  <div class="audio_box"> 
    <!-- ↓ 等等會利用這個標籤生成音檔與按鈕 -->
    <a href="assets/lixw7-aes4f.mp3" class="audio">Music One</a>
  </div>
  <!-- ↓ vimeo 內嵌檔案, 可參考官方文件  -->
  <div style="position:relative; width: 480px; height: 270px; top:0">
    <iframe src="https://player.vimeo.com/video/8653232?h=b0cc5455fe&autoplay=1&loop=1&color=ffffff&title=0&byline=0&portrait=0&muted=1&controls=0"
      style="position:absolute;top:0;left:0;width:100%;height:100%;" 
      frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
    </iframe>
  </div>
</div>
  <script src="https://player.vimeo.com/api/player.js"></script>
  <script src="js/jquery-1.12.4.min.js"></script>

### javascript
(先上成功運作的版本, 之後會更新為ES6)

$.fn.jAudio = function(){
  this.each(function(){

    var $this = $(this);
    // 取得對象的 href 屬性為 jAudioSrc, 該動作為取得 .mp3 檔案位置
    var jAudioSrc = $this.attr('href'); 
    var jAudioTitle = $this.text();
    // 設定欲新增的標籤 id
    var jAudioPlayerId = 'jAudio-' + Math.floor( Math.random() * 999999 );
    // 設定欲新增的 audio 標籤與其其他屬性
    var jAudioPlayerTag = '<audio  autoplay="autoplay"  loop class="jAudioPlayer" id="'+ jAudioPlayerId +'"></audio>';
    // audio 的音檔來源
    var jAudioPlayerSrcTag = '<source src="'+ jAudioSrc +'" type="audio/mp3">';

    $this.css('display', 'none');
    $this.after(jAudioPlayerTag);

    var jAudioPlayer = $('#' + jAudioPlayerId);
    jAudioPlayer.append(jAudioPlayerSrcTag);

    // 新增開關音樂按鈕
    var jAudioControls = '<a href="javascript:void(0)" title="'+ jAudioTitle +'" id="jAudioBtn-'+ jAudioPlayerId +'" data-target="'+ jAudioPlayerId +'" class="jAudioBtnPlay"></a>';
    jAudioPlayer.after(jAudioControls);
    
    // 設定按鈕在開關樣式
    var jAudioBtn = $('#jAudioBtn-' + jAudioPlayerId);
    jAudioBtn.click(function(){
        if( $(this).hasClass('jAudioBtnPlay') ){
            document.getElementById($(this).data('target')).play();
            $(this).removeClass('jAudioBtnPlay');
            $(this).addClass('jAudioBtnPause');
        }
        else{
            document.getElementById($(this).data('target')).pause();
            $(this).removeClass('jAudioBtnPause');
            $(this).addClass('jAudioBtnPlay');
        }
    });
  });
};

$('.audio').jAudio();

### css

/*
    Plugin Name: jAudio
    Copyright (C) 2018 - Mohammad Esmaeilzadeh
    Author URL: http://www.bugless.ir/
    Author Email: [e-mail]
    GitHub: https://github.com/buglessir
    A jQuery plugin for convert <A> tags to simple audio player

    \\\感謝套件的作者啊啊(淚目)///
*/

.audio_box {
    position: absolute;
    left: 2%;
    top: 2%;
    width: 30%;
    z-index: 600;
}

a[class^='jAudioBtn'] {
    display: inline-block;
    width: 26px;
    height: 26px;
    text-decoration: none;
    background: url('assets/controls.png');
}

a.jAudioBtnPlay {
    background-position: top;
}

a.jAudioBtnPause {
    background-position: bottom;
}

## 參考
[vimeo 官方文件](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters)

###### tags: `html` `js` `video` `jQuery` `vimeo` `外部API`