この記事は 約 1分34秒 で読めます。
日の目を見ることがなかったスクリプト…別の機会に使うかもしれないのでログで残しておきます。
video.jsというライブラリを利用して動的に動画を設定する関数です。
UAで判定して、PCではvideo.jsを使い、videoタグが対応しているであろうスマートフォンではnativeのプレーヤーに再生を任せる仕様です。
IE8では付属のFlashPlayerで再生されます。また、ファイルの参照先は環境に合わせて書き換える必要があります。
JSON.parseのとこですが、パースしたいJSON文字列がdata-setup=”{‘***’ : ‘***’}”みたいな感じだとパースエラーでました。囲む部分はダブルクオーテーションじゃないといけない仕様なのかな。
★HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <link rel="stylesheet" type="text/css" href="videojs/video-js.css"> <script language="JavaScript" type="text/javascript" src="videojs/video.dev.js"></script> <script language="JavaScript" type="text/javascript" src="js/jquery.js"></script> <script language="JavaScript" type="text/javascript" src="js/videoController.js"></script> <script type="text/javascript"> videojs.options.flash.swf = "videojs/video-js.swf"; </script> </head> <body> <div class="movies" data-setup='{"src": "movies/*****", "width": 480, "height": 270, "poster": "http://video-js.zencoder.com/oceans-clip.png"}'></div> </body> </html> |
★コントローラー
59行目でFireFox用にwebmファイルも指定していますが、不要な場合は削除してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
(function($){ var _ua = (function(){ return { Touch:typeof document.ontouchstart != "undefined", isAndroid:(/android/gi).test(navigator.appVersion) }; })(); $(function(){ $('.movies').each(function(i) { var dataSetup = JSON.parse($(this).attr('data-setup')); setUpVideo('#video_' + (i + 1), $(this), dataSetup.src, dataSetup.width, dataSetup.height, dataSetup.poster); if(!_ua.Touch){ videojs('video_' + (i + 1), {}, function(){ var vid = this; vid.on("ended", function(){ }); }); } else{ $('#video_' + (i + 1)).on("ended", function(){ }); } if(_ua.isAndroid){ $('#video_' + (i + 1)).on('click',function(){ if(this.isPaused === undefined || this.isPaused === true){ this.isPaused = false; this.play(); } else{ this.isPaused = true; this.pause(); } }); } }); }); function setUpVideo(movieId, parentElement, src, width, height, poster){ poster = typeof poster !== 'undefined' ? poster : 'none'; if (/^#/gi.test(movieId)) { movieId = movieId.slice(1); } var attributes = { 'id': movieId, 'class': 'video-js vjs-default-skin vjs-big-play-centered', 'width': width, 'height': height, 'controls': '', 'poster': poster, 'preload': 'none' }; var sMp4 = $('<source>').attr({ 'type': 'video/mp4', 'src': src + '.mp4' }); var sWebm = $('<source>').attr({ 'type': 'video/webm', 'src': src + '.webm' }); var v = $('<video>').attr(attributes); v.append(sMp4).append(sWebm); $(parentElement).append(v); } })(jQuery); |
余談ですが、再生完了イベント「ended」はvideo.jsを使用する場合はそちらに任せています。(15行目あたり)
あと個人的には、DOMにvideoタグとsoundタグがあると自動的にセットアップする仕組みじゃなくて、HTMLに自分で書きつつ任意のタイミングでセットアップしたかったですね。それができなかったから動的にvideoタグをDOMに追加しているわけです…
ちょこっと調べたんですがvideo.js内のvjs.autoSetupTimeout(1)ってとこをコメントアウトすれば、videojsのプレーヤーとnativeのプレーヤーを混在させるなんてこともできるのかもしれませんね(´・ω・`)