SmartBrain(Ver:1.13.6)で教材を登録するとき、PC用、iPhone用、Andloid用の3パターンの起動ファイルを選択することが可能です。このとき、以下のHTMLファイルを用意し、iPhone用、Andloid用の起動ファイルをこのHTMLに設定することで、モバイル端末全般に動画教材を配信することが可能です。
このHTMLはJavaScriptでUserAgentを判定し、適切な動画に誘導するものです。アクセスさせたい端末のUserAgentを調べ、適切な動画を用意することが必須になります。(iPhone、Andloid対応動画の作り方はこちらを参照)
<html><head><script>// <[CDATA[var API;var startTime;function init(){startTime = new Date().getTime();var win;for(win = window;win.API==null && win.parent!=null && win.parent!=win; win = win.parent);API = win.API;API.LMSInitialize(“”);}function exit(){var diff;diff = new Date().getTime()-startTime;s=(diff – diff % 1000)/1000;m=(s-s%60)/60;h=(m-m%60)/60;s=s-m*60;m=m-h*60;if(h<10)h=”0″+h;if(m<10)m=”0″+m;if(s<10)s=”0″+s;API.LMSSetValue(“cmi.core.session_time”,h+”:”+m+”:”+s);API.LMSFinish(“”);}// ]]></script><meta http-equiv=”Content-Type” content=”text /html; charset=UTF-8″ /></head><body leftmargin=”0″ topmargin=”0″ onload=”init()” onunload=”exit()” style=”min-height:374px”><script type=”text/javascript”>var strUA = navigator.userAgent.toLowerCase();if(strUA.indexOf(“android”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}elseif(strUA.indexOf(“iphone”)!=-1){document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’);}elseif(strUA.indexOf(“ipad”)!=-1){document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’);}elseif(strUA.indexOf(“msiemobile”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}elseif(strUA.indexOf(“blackberry”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}else{ document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’); }</script></body></html><html><head><script>// <[CDATA[var API;var startTime;function init(){ startTime = new Date().getTime(); var win; for(win = window;win.API==null && win.parent!=null && win.parent!=win; win = win.parent); API = win.API; API.LMSInitialize(“”);}function exit(){ var diff; diff = new Date().getTime()-startTime; s=(diff – diff % 1000)/1000; m=(s-s%60)/60; h=(m-m%60)/60; s=s-m*60; m=m-h*60; if(h<10)h=”0″+h; if(m<10)m=”0″+m; if(s<10)s=”0″+s; API.LMSSetValue(“cmi.core.session_time”,h+”:”+m+”:”+s); API.LMSFinish(“”);}// ]]></script><meta http-equiv=”Content-Type” content=”text /html; charset=UTF-8″ /></head><body leftmargin=”0″ topmargin=”0″ onload=”init()” onunload=”exit()” style=”min-height:374px”><script type=”text/javascript”>var strUA = navigator.userAgent.toLowerCase();if(strUA.indexOf(“android”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}elseif(strUA.indexOf(“iphone”)!=-1){document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’);}elseif(strUA.indexOf(“ipad”)!=-1){document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’);}elseif(strUA.indexOf(“msiemobile”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}elseif(strUA.indexOf(“blackberry”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}else { document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’); }</script></body></html>
UserAgentを利用することで、幅広いモバイル対応が可能ですので、これを元に様々な応用が可能です。ぜひ試してみてください!
SmartBrainは20ユーザまで無料な学習管理システムLMSです。生涯教育や趣味などご自由にお使いください!