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);
ほんとにこれでいいのか・・・？
以下広告
