Struts2で取得した動画がスマホで再生されない

Question

###前提・実現したいこと
Struts2で動画をサーバから取得し、動的にvideoタグを生成してそこにソースを当て込み動画を再生させています。
PCからは問題なく閲覧できていますが、スマートフォンやタブレットでは閲覧できない場合があるため、これを解決させたいです。現在iphone、Androidともに再生できていません。
https://teratail.com/questions/85991
の質問とほぼ同じなのですが、問題の箇所が絞り込めたため再度投稿させていただきました。
動画ファイルはmp4でH.264形式です。ファイルサイズは約4MBです。
動画ファイルのパスを隠すため、JSPではActionクラスを呼び、そこでパスを探しています。

###発生している問題・エラーメッセージ
iphone5Sで動画を再生させようとすると、https://teratail.com/questions/85991の現象が発生します。
また、サーバ側でリクエスト後に以下のメッセージが表示されます。
重大: Exception occurred during processing request: java.io.IOException: 確立された接続がホスト コンピューターのソウトウェアによって中止されました。 [月 8 28 16:19:18 JST 2017]

###該当のソースコード
videoタグのsrcで指定するActionクラスです。

package action;
import 省略;
@Namespace("/")
@ParentPackage("test")
@Results({
	@Result(name = "video", type = "stream",
			params = {
					"inputName", "inputStream",
					"contentType", "video/mp4",
					"contentLength", "${contentLength}",
					"contentDisposition", "attachment; filename = ${fileName}"
	}),
	@Result( name="error" , type="dispatcher", location="/error.jsp")
})
public class VideoAction extends ActionSupport {
	private InputStream inputStream;
	private long contentLength;
	private String fileName;
	private String lotNo;
	private String reqFilePath;

	public String execute() {
		String lotDir = "/test/";
		BufferedInputStream bis = null;

		try {
			File lotNoFile = new File(lotDir + this.lotNo);
			bis = new BufferedInputStream(new FileInputStream(lotNoFile));

			byte[] byteArray = IOUtils.toByteArray(bis);
			this.inputStream = new ByteArrayInputStream(byteArray);
			this.contentLength = byteArray.length;

			return "video";
		} catch (Exception e) {
			return "error";
		} finally {
			try {
				bis.close();
			} catch (IOException e) {
				e.printStackTrace();
			}

		}
	}

	public InputStream getInputStream() {
		return inputStream;
	}
	public void setInputStream(InputStream inputStream) {
		this.inputStream = inputStream;
	}
	public long getContentLength() {
		return contentLength;
	}
	public void setContentLength(long contentLength) {
		this.contentLength = contentLength;
	}
	public String getFileName() {
		return fileName;
	}
	public void setFileName(String fileName) {
		this.fileName = fileName;
	}
	public String getLotNo() {
		return lotNo;
	}
	public void setLotNo(String lotNo) {
		this.lotNo = lotNo;
	}
	public String getFilePath() {
		return reqFilePath;
	}
	public void setFilePath(String filePath) {
		this.reqFilePath = filePath;
	}
}

<video src='video.action?lotNo=1></video>

###試したこと
動画ファイルに問題があるかと思い調査しましたが、プロジェクトのルートディレクトリ以下に直接mp4ファイルを配置し、ソースにパスを直書きしたらiphoneで動画が再生できたため、動画の問題ではないと思います。

###補足情報(言語/FW/ツール等のバージョンなど)
Struts2.3.24

VideoAction.javaのResult又はStreamの指定に問題があるのではと思っています。
情報に不足などありましたらご指摘ください。よろしくお願いします。

###追記
othersight様、A-pZ様
時間が空いてしまい申し訳ありません。
https://www.stevesouders.com/blog/2013/04/21/html5-video-bytes-on-ios/
等を参考に、レスポンスヘッダにAccept-Range、Content-Rangeを仕込み、Content-LengthはリクエストヘッダのRangeが0-1だった場合は2を返すなど行いましたが、未だ解決に至っていません。
ソースは以下になります。

HttpServletRequest request = getRequest(); //リクエストヘッダを取得
String range = request.getHeader("Range").replace("bytes=", "");
String rangeFirst = range.substring(0, range.indexOf("-"));
String rangeLast = range.substring(range.indexOf("-") + 1, range.length());
String contentRange = "";

HttpServletResponse response = getResponse();
response.setStatus(206);
response.setHeader("Accept-Ranges", "bytes");

//range: "0-"
if (range.equals("0-")) {
contentRange = "bytes " + rangeFirst + "-" + (Integer.parseInt(rangeFirst) + 1) + "/" + this.contentLength;
}
//range: "0-x"
if (range.indexOf("0-") != -1 && (!rangeLast.isEmpty() && !rangeLast.equals("0"))) {
contentRange = "bytes " + rangeFirst + "-" + rangeLast + "/" + this.contentLength;
}
//range: "x-"
if (!rangeFirst.equals("0") && range.lastIndexOf("-") != -1) {
contentRange = "bytes " + rangeFirst + "-" + String.valueOf(this.contentLength - 1) + "/" + this.contentLength;
}
//range: "0-1"
if (range.equals("0-1")) {
contentRange = "bytes 0-1/" + this.contentLength;
this.contentLength = 2;
}
//range: "x-x"
if (!rangeFirst.equals("0") && range.lastIndexOf("-") == -1) {
contentRange = "bytes " + rangeFirst + "-" + (Integer.parseInt(rangeLast) + 1) + "/" + this.contentLength;
this.contentLength = 2;
}

response.setHeader("Content-Range", contentRange);
System.out.println("★レスポンスRange--- " + contentRange);
System.out.println("★コンテントLength--- " + this.contentLength);

上記のソースを仕込み、１回目のリクエストに対しては正常に動作しましたが２回目のリクエストからはサーバ側で
重大: Exception occurred during processing request: java.io.IOException: 確立された接続がホスト コンピューターのソウトウェアによって中止されました。 [月 8 28 16:19:18 JST 2017]
がまた発生してしまいます。
Last-ModifiedやEtagなど仕込むことも試しましたが、変わらないようです。
以下リクエスト、レスポンスになります。

１回目のリクエスト
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Cookie:JSESSIONID=0D946AEE3ABF37850218436884DEB391; _ga=GA1.1.2024693826.1504524761; _gid=GA1.1.353248483.1504524761
Host:localhost:8080
Pragma:no-cache
Range:bytes=0-
Referer:http://localhost:8080/test/test.action
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

１回目のレスポンス
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Disposition:attachment; filename =
Content-Language:ja
Content-Length:1595162
Content-Range:bytes 0-1/1595162
Content-Type:video/mp4
Date:Tue, 05 Sep 2017 06:35:37 GMT
Etag:42b795-4867d5fcac1c0
Server:Apache-Coyote/1.1

２回目のリクエスト
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Cookie:JSESSIONID=0D946AEE3ABF37850218436884DEB391; _ga=GA1.1.2024693826.1504524761; _gid=GA1.1.353248483.1504524761
Host:localhost:8080
Pragma:no-cache
Range:bytes=1572864-
Referer:http://localhost:8080/test/test.action
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

２回目のレスポンス
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Disposition:attachment; filename =
Content-Language:ja
Content-Length:1595162
Content-Range:bytes 1572864-1595161/1595162
Content-Type:video/mp4
Date:Tue, 05 Sep 2017 06:35:37 GMT
Etag:42b795-4867d5fcac1c0
Server:Apache-Coyote/1.1

すみませんが、何かわかることがありましたらご教授いただけますでしょうか。
よろしくお願いいたします。

Answer 1

ファイル分割に対応せず、Rangeヘッダに対応するのであれば、以下で動画の再生はできるようになります。いくつかポイントがあります。

struts.xmlにて、Struts2のStreamResultを継承したResultを新設する。ここではMovieResultと名付けて、以下のように設定する。

<struts>
	<package name="sample" abstract="true" extends="struts-default">
		<result-types>
			<result-type name="movie" class="lumi.sample.result.MovieResult" />
		</result-types>
(以下省略)

これでResultのtypeにmovieを指定すると、MovieResultへ処理が移動します。

続いてActionクラスは、Struts2標準のダウンロードのしきたり通りの情報を書き込みます。以下の例はStruts2.5系ですが、2.3系でも動作します。

import java.io.File;
import java.io.InputStream;
import java.net.URL;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.opensymphony.xwork2.ActionSupport;

import lombok.Getter;
import lombok.extern.log4j.Log4j2;
import lumi.action.LumiActionSupport;

/**
 * Actionクラスのテンプレートサンプル。
 *
 * @author A-pZ ( Serendipity 3 ./ as sundome goes by. )
 */
@Namespace("/")
@ParentPackage("sample")
@Results({
		// location属性に指定したhtmlファイル名は、/WEB-INF/content 以下からの相対パス。
		@Result(name = ActionSupport.SUCCESS, type = "movie", params = { "contentType",
				"video/mp4", "inputName","stream", "contentDisposition",
				"filename=\"${filename}\"","contentLength","${length}"}),})
public class DownloadAction extends LumiActionSupport {

	@Action("download")
	public String start() throws Exception {

		filename = "waterfall-free-video1.mp4";
        stream = servletRequest.getServletContext().getResourceAsStream("/WEB-INF/waterfall-free-video1.mp4");
        URL url = servletRequest.getServletContext().getResource("/WEB-INF/waterfall-free-video1.mp4");
        File file = new File(url.getFile());
        length = file.length();
		return SUCCESS;
	}

	@Getter
	private String filename;
	@Getter
	private InputStream stream;
	@Getter
	private Long length;

}

※一部、Project lombokのアノテーションを利用してgetメソッドを省略しています。

最後にMovieResultの実装部分で、リクエストヘッダを判断して、レスポンスヘッダに追加情報を足します。

import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.result.StreamResult;

import com.opensymphony.xwork2.ActionInvocation;

import lombok.Data;

/**
 * Range対応暫定(分割しない)のResult。これをひな形にして分割ストリーム処理もいけるはず。
 *
 * @author A-pZ
 *
 */
@Data
public class MovieResult extends StreamResult {
	protected void doExecute(String finalLocation, ActionInvocation invocation) throws Exception {
		LOG.debug("Find the Response in context");

		HttpServletRequest oRequest = (HttpServletRequest) invocation.getInvocationContext().get(HTTP_REQUEST);
		HttpServletResponse oResponse = (HttpServletResponse) invocation.getInvocationContext().get(HTTP_RESPONSE);

		OutputStream oOutput = null;

		try {
			if (inputStream == null) {
				inputStream = (InputStream) invocation.getStack().findValue(conditionalParse(inputName, invocation));
			}

			LOG.debug("Set the content type: {};charset{}", contentType, contentCharSet);
			if (contentCharSet != null && !contentCharSet.equals("")) {
				oResponse.setContentType(conditionalParse(contentType, invocation) + ";charset="
						+ conditionalParse(contentCharSet, invocation));
			} else {
				oResponse.setContentType(conditionalParse(contentType, invocation));
			}

			LOG.debug("Set the content length: {}", contentLength);
			if (contentLength != null) {
				String _contentLength = conditionalParse(contentLength, invocation);
				int _contentLengthAsInt;
				try {
					_contentLengthAsInt = Integer.parseInt(_contentLength);
					if (_contentLengthAsInt >= 0) {
						oResponse.setContentLength(_contentLengthAsInt);
					}
				} catch (NumberFormatException e) {
					LOG.warn("failed to recognize {} as a number, contentLength header will not be set", _contentLength,
							e);
				}
			}

			LOG.debug("Set the content-disposition: {}", contentDisposition);
			if (contentDisposition != null) {
				oResponse.addHeader("Content-Disposition", conditionalParse(contentDisposition, invocation));
			}

			// リクエストヘッダにRangeがあった場合はストリーム再生用のレスポンスヘッダを追加
			if (oRequest.getHeader("Range") != null) {
				int start = 0;
				String lengthString = conditionalParse(contentLength, invocation);
				int end = Integer.parseInt(lengthString) - 1;
				int length = Integer.parseInt(lengthString);
				String contentRange = String.format("bytes %s-%s/%s", start, end, length);
				oResponse.setHeader("Content-Range", contentRange);
				oResponse.setHeader("Content-Length", contentLength);
				oResponse.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);
			}

			oOutput = oResponse.getOutputStream();

			LOG.debug("Streaming result [{}] type=[{}] length=[{}] content-disposition=[{}] charset=[{}]", inputName,
					contentType, contentLength, contentDisposition, contentCharSet);

			LOG.debug("Streaming to output buffer +++ START +++");
			byte[] oBuff = new byte[bufferSize];
			int iSize;
			while (-1 != (iSize = inputStream.read(oBuff))) {
				LOG.debug("Sending stream ... {}", iSize);
				oOutput.write(oBuff, 0, iSize);
			}

			LOG.debug("Streaming to output buffer +++ END +++");

			// Flush
			oOutput.flush();
		} finally {
			if (inputStream != null) {
				inputStream.close();
			}
			if (oOutput != null) {
				oOutput.close();
			}
		}
	}

}

検証環境がすぐに用意できないので、iOS/Androidで検証はしていませんが、PCブラウザでの動作はできています。

…しかし今時なら対応できそうな機能なので、拡張のresultとして公式にあっても良いのではないかと思いますね。

お返事が遅れて申し訳ありませでした(´・ω・｀)

Answer 2

Struts2に関する知識がないためサーバ側の解決法まで紹介できないのが残念ですが、ブラウザ側の動作についてはご説明できればと思います。

モバイルブラウザでは、<video>要素で動画を再生する際、不要なダウンロードを少しでも削減するために、HTTPでいきなり先頭から末尾まで一度のHTTPリクエストでファイルをダウンロードするのではなく、ある程度の長さに区切って、少しずつダウンロードを試みるようになっています。

具体的には、ブラウザから送られるHTTPリクエストヘッダで、

Range: bytes=0-213183

のような形で、ダウンロードするファイル内の位置が指定されます。これに対し、サーバ側では、HTTPレスポンスヘッダで、

HTTP/1.1 206 Partial Content
Content-Range: bytes 0-213183/51919826
Content-Length: 213184

のような形でファイルの一部分であることを示してブラウザに渡すようにする必要があります。

発生したエラーがダウンロード中断のような現象を表しているのは、ブラウザが部分ダウンロードを要求したにも関わらず、サーバ側がファイル全体を渡そうとして、ブラウザが要求したサイズを送信完了しても送信が終了しなかったためと考えられます。

Strut2でのHTTPヘッダの扱い方がわからないため、説明できるのはここまでになってしまいますが、サーバ側でPartial Contentのダウンロードに対応していないとモバイルブラウザの<video>要素では正常に再生できない点には注意が必要です。

参考:
Safari Web Content Guide
MDN Web Docs: HTTP range requests

Comments

[A-pZ]

まさに othersight様のおっしゃるとおりで、HTTPヘッダでRangeを扱わなければなりません。
ですが標準のStruts2ではこのRangeヘッダに関するStreamResultの値は対応していませんので、拡張が必要です。

[othersight]

コメントと補足ありがとうございます!

[Begi]

othersight様、回答いただきありがとうございます。
モバイルブラウザではそのような処理が行われていたんですね…初耳でした。
ダウンロード中断についても目から鱗でした。ご教授いただきありがとうございます。

[Begi]

A-pZ様、コメントいただきありがとうございます。
Struts2での拡張というのは、自分で実装できるものなのでしょうか…？

[Begi]

othersight様、A-pZ様
Struts2を使用せず、動画取得のHTTPリクエストを受けてレスポンスで動画ファイルを返す、ということを行えば閲覧できるのではと思ったのですがいかがでしょうか。
参考サイト：https://qa.atmarkit.co.jp/q/834

[A-pZ]

Begi様
はい、Struts2のStreamResultでは機能が不足しているので、StreamResultを継承したクラスをつくり、resultを指定する方法で良いと思いますが、他にもサーブレットで実装してレスポンスを自前で作成する方法もできるかと思います。（StreamResult拡張については、追って調べたくなりました。ありがとうございます）

[Begi]

A-pZ様
＞StreamResultを継承したクラスを作り
これはどのようにすればよろしいでしょうか…？
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;
などを追ってみましたが、Interfaceクラスで実装がどこで行われているかが分からなくて…申し訳ありません。

[A-pZ]

Struts2のResultインタフェースを継承したクラスが、org.apache.struts2.resultパッケージにあり、ファイルのダウンロードに使っているstreamは、StreamResultクラスが動作しています。なお、新たにresultの種類を追加するので、struts.xmlの <result-types>にも新しく作るクラスを定義すれば動作します。

[Begi]

A-pZ様
importしているstruts2のjar内のパッケージをJavaリソース内のライブラリーで確認したのですが、org.apache.struts2.resultが見当たりませんでした。以下確認したjarになります。
struts2-codebehind-plugin-2.3.24.jar
struts2-convention-plugin-2.3.24.jar
struts2-core-2.3.32.jar
struts2-jasperreports-plugin-2.3.24.jar
struts2-javatemplates-plugin-2.3.24.jar
struts2-json-plugin-2.3.24.jar
struts2-junit-plugin-2.3.24.jar
struts2-tiles-plugin-2.3.24.jar
参照場所が間違っているのでしょうか。お手数おかけし申し訳ありません。

[A-pZ]

なるほど、struts2.3系でしたね、失礼しました。
その場合は、org.apache.struts2.dispatcher の中にあります。

[Begi]

A-pZ様
ありがとうございます。StreamResultクラスを見つけることが出来ました。
実装前にお伺いしたいのですが、プロジェクト内に動画を配置しvideoタグのsrcでパスを指定した場合のリクエストとレスポンスを確認したのですが、
HTTPリクエストが複数存在し、リクエストヘッダ内にはRangeがあり、0-10000、10000-20000、…のように分割してリクエストされていました。また、レスポンスヘッダにはContent-RangeでリクエストヘッダのRangeと同等の値がセットされていました。
今回はサーバ側でContent-Rangeを返すように実装すると思いますが、クライアント側のリクエストは改修する必要はありませんでしょうか。今はActionにリクエストを送っているヘッダ内にはRangeが存在していません。