GrowiでAudio/Videoを埋め込む

はじめに

Growi を使い始めたものの、音声やビデオを追加するためには一工夫が必要であることに気づきました。色々模索した中で、@Nobutoさんの記事を参考したことによって Growi のページに埋め込むことに成功しました。追加されたコンテンツはは問題なく再生されていたのですが、下記の問題があってすこし工夫したところを紹介したく思います。

問題

iframe を使用して埋め込んだ場合、周りに背景が大幅に残ってしまったり、Resizeがうまくいかないといった現象がありました。

やったこと

埋め込み要素を iframe から HTML5 でサポートしている audio / video 要素に切り替えることで問題を解決しました。主な実装は@Nobutoさんの記事がベースになっています。

admin-setting/customize/custom_script.js

window.onload = function() {
  // For audio player wrapper
  var audios = [].slice.call(document.getElementsByClassName('audio'));
  for (var i = 0; i < audios.length; i++) {
    var node = audios[i];

    var realAudio = document.createElement('audio');
    realAudio.setAttribute("controls", "controls");
    realAudio.setAttribute('src', node.getAttribute('src'));
    
    node.appendChild(realAudio);
  }
  
  // For video player wrapper
  var videos = [].slice.call(document.getElementsByClassName('video'));
  for (var i = 0; i < videos.length; i++) {
    var node = videos[i];

    var realVideo = document.createElement('video');
    realVideo.setAttribute("controls", "controls");
    realVideo.setAttribute('src', node.getAttribute('src'));
    
    if (node.hasAttribute('width')){
      realVideo.setAttribute('width', node.getAttribute('width'));
    }
    
    if (node.hasAttribute('height')){
      realVideo.setAttribute('height', node.getAttribute('height'));
    }
    
    node.appendChild(realVideo);
  }
};

your_page.md

<div class="audio" src="[URL/Path]"></div>
<div class="video" src="[URL/Path]" width=300></div>

最後に

いつもは記事を読むばかりだったのすが、1回くらいお返しをしなければと思い投稿しました。
少しでもお役に立てているなら幸いです

参考

• GrowiでYoutubeの動画を埋め込む
• MDN Web Docs / Audio
• MDN Web Docs / Video