質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

35822閲覧

インライン再生する動画ファイルをブレイクポイントで出し分けたい

orca_

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2018/09/28 02:26

編集2022/01/12 10:55

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属性をつける事が出来ないようなので、その他で何か良い方法があれば…と思っております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答1

0

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

_lemon2003_

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問