mosakabe @ ウィキ
iPhoneで撮影した動画を再生
最終更新:
mosakabe
-
view
多くの環境で動作させるために http://mediaelementjs.com/ を使う。
mediaelementjsをダウンロードし配置
mediaelementjsをダウンロードし配置
iPhone, iPad は h.264 mov 形式で保存されるので、拡張子をmp4に変更
サーバに配置
サーバに配置
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>動画</title> <script src="mediaelement/build/jquery.js"></script> <script src="mediaelement/build/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="mediaelement/build/mediaelementplayer.css" /> </head> <body> <video id="player" width="320" height="240" controls="controls" preload="none"> <source type="video/mp4" src="IMG_0345.mp4" /> </video> </body> <script> if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){ $('video').mediaelementplayer(); var player = new MediaElementPlayer('#player'); } </script> </html>
Javascriptのif文は本来は必要ないが、新しいiPadでうまく表示できなかったので、firefox以外はすべてHTML5表示にした。
(Firefoxもそのうちh.264対応するだろう)
(Firefoxもそのうちh.264対応するだろう)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>動画</title> <script src="mediaelement/build/jquery.js"></script> <script src="mediaelement/build/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="mediaelement/build/mediaelementplayer.css" /> </head> <body> <video id="player" width="540" height="303" controls="controls" > <source type="video/mp4" src="/hoge.php" /> </video> <p> <input type="button" id="button" value="時間"><br> <div id="time"><div> </body> <script type="text/javascript"><!-- if( navigator.userAgent.toLowerCase().indexOf("iphone;") == -1 && navigator.userAgent.toLowerCase().indexOf("ipad;") == -1 ){ var player = new MediaElementPlayer('#player', { features: ['playpause','progress','current','duration','tracks','volume','fullscreen'] } ); $("#button").click(function(){ $("#time").append( Math.round( player.media.currentTime * 100 ) / 100 + "<br>" ); }); } //--></script> </html>
<?php $filename = '/home/mosakabe/echo-hereweare.mp4'; $size = filesize( $filename ); $lm_time = filemtime( $filename ); $stats = stat( $_SERVER['SCRIPT_FILENAME'] ); $etag = sprintf( '"%x-%x-%x"', $stats['ino'], $stats['size'], $stats['mtime'] ); if ( ( isset( $_SERVER['HTTP_IF_MODIFIED_SINCE'] ) && strtotime( $_SERVER['HTTP_IF_MODIFIED_SINCE'] ) >= $lm_time ) || ( isset( $_SERVER['HTTP_IF_NONE_MATCH'] ) && stripcslashes( $_SERVER['HTTP_IF_NONE_MATCH'] ) == $etag ) ) { header( 'HTTP/1.1 304 Not Modified' ); exit(); } header( 'Last-Modified: ' . gmdate( "D, d M Y H:i:s T", $lm_time ) ); header( 'ETag: ' . $etag ); header( 'Accept-Ranges: bytes' ); header( 'Content-type: video/mp4'); header_remove( 'Transfer-Encoding' ); header_remove( 'X-Powered-By' ); $handle = fopen( $filename, "rb"); if( isset( $_SERVER['HTTP_RANGE'] ) ) { list($toss, $range) = explode('=', $_SERVER['HTTP_RANGE']); list($range_start, $range_end) = explode('-', $range); if(empty($range_end)){ $range_end = $size - 1; $range = $range_start . '-' . $range_end; } header('HTTP/1.1 206 Partial Content'); header( 'Content-Range: bytes ' . $range . '/' . $size); header( 'Content-Length: ' . ( $range_end - $range_start + 1 ) ); fseek($handle, $range_start); }else{ header( 'Content-Length: ' . $size ); } while( !feof($handle) ){ echo fread( $handle, $size ); @flush(); } fclose($handle);
ほんとにこれでいいのか・・・?
以下広告