htmlについて質問させて下さい。

レスポンシブ対応により、画像ファイルをPCとスマートフォンで別々の物を表示させたい場合は
picture要素やsrcset等を使用できると思うのですが、
同様の事をインライン再生する動画ファイルで行いたい場合、どのような方法がありますでしょうか？

<video muted autoplay playsinline>

<!--width:641px以上で閲覧した場合-->
<source src="movie_pc.mp4" type="video/mp4">
<source src="movie_pc.webm" type="video/webm">

<!--width:640px以下で閲覧した場合-->
<source src="movie_sp.mp4" type="video/mp4">
<source src="movie_sp.webm" type="video/webm">

</video>

上記のような形で動画データを出し分けたいと思っております。

videoタグ内ではsrcset等が使用出来ないようなので他の方法を調べていたのですが、
良い解決法が出ない状態です。

ご教示頂けますと幸いです。
宜しくお願い致します。

--- 追記 ---
spとpcで二つのvideoタグを記述し、それぞれをメディアクエリで振り分ける、という方法でも形としては可能なのですが、
videoタグは一つで、その中のsourceのみで振り分けたいと思います。
source自体にclass属性をつける事が出来ないようなので、その他で何か良い方法があれば…と思っております。

yoshinavi

2018/09/28 03:37

CSSのメディアクエリで、それぞれを振り分けてはどうですか？

orca_

2018/09/28 04:54

ご回答ありがとうございます。またご説明不足で申し訳ありません。videoタグを2つ用意し、メディアクエリで振り分けても形としては可能だと思うのですが、videoタグの中のsourceのみで振り分けたいのです。（source自体にclass属性が付けられないようです）

yoshinavi

2018/09/28 05:16

＜source＞タグのみでPCとSPの切替は出来ないと思います。（知識不足ですみません。）

orca_

2018/09/28 05:24

ありがとうございます。やはり不可能なのですね… もしかしたら方法があるかも、という事を祈りつつ他の方からのご回答を待ってみようと思います。どうも有難う御座いました。

行動規範の内容に同意します

回答1件

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<meta http-equiv="X-UA-Compatible" content="ie=edge">
7	<title>Video</title>
8</head>
9<body>
10	<video muted autoplay playsinline class="routingByBreakpoint">
11		<source data-src="video.mp4" data-query="pc">
12		<source data-src="videoplayback.mp4" data-query="mobile">
13	</video>
14
15	<script src="common.js"></script>
16</body>
17</html>

javascript
1var defaultQueryList = {
2	mobile: matchMedia("(max-width: 1279px"),
3	pc: matchMedia("(min-width: 1280px)")
4}
5
6function routingByBreakpoint(sourceList) {
7	for(var i = 0, l = sourceList.length; i < l; i++){
8		var source = sourceList[i];
9
10		if(!(source.dataset.query && defaultQueryList[source.dataset.query] && source.dataset.src)) continue;
11		if(!(defaultQueryList[source.dataset.query].matches)) continue;
12
13		var newSource = document.createElement("source");
14		newSource.src = source.dataset.src;
15
16		source.parentElement.appendChild(newSource);
17	}
18}
19
20(function (){
21	var elemList = document.getElementsByClassName("routingByBreakpoint");
22
23	for(var i = 0, l = elemList.length; i < l; i++){
24		var sourceList = elemList[i].getElementsByTagName("source");
25
26		routingByBreakpoint(sourceList);
27	}
28
29})();

仕様

html

video タグに routingByBreakpoint クラスをつける
source タグには src 属性の代わりに data-src 属性でパスを指定
また、data-query 属性で pc, mobile などを指定（カスタマイズ可能）。

javascript

defaultQueryList にブレイクポイント別にメディアクエリを指定 (data-query で指定したもの、種類を増やしていろいろできる)
routingByBreakpoint クラスのついたvideoタグでループを回して、routingByBreakpoint(sourceList) を呼び出し
あとで動的にvideoタグを増やした場合も、routingByBreakpoint(該当のvideoタグ)で追加できます。

投稿2018/10/01 09:15