javascript - jquery を使用してビデオ src の値を動的に設定するとビデオを再生できませんか?

Question

リーリー

デモはここにあります https://jsfiddle.net/r9u1cn7o/
さまざまなラベルをクリックすると、ポップアップ ボックスが表示され、対応するビデオが再生されます。ただし、jquery を介して src に値を割り当てることに成功しましたが、割り当てられていません。なぜ再生できないのかわかりませんか？

Answer 1

ソースの src 値は jQuery を通じて正常に割り当てられます。デバッグの観点から見ると、ブラウザーは対応するビデオを取得するリクエストを開始せず、単に a タグの src の値をソースに割り当てます。

ただし、これを実行すると、ブラウザはビデオ ファイルを取得するためのアドレスを要求します:

リーリー

したがって、ビデオ内にソースタグがある場合、ブラウザはレンダリング後にアドレスを自動的に取得し、アドレスが変更されてもアドレスを再度取得することはないと推測できます。ただし、ソース タグを動的に挿入すると、ブラウザがリフローするようにトリガーされ、対応するアドレスにあるファイルを再生用に取得できます。

Answer 2

リーリー

ソース内の src はレンダリング中に 1 回だけチェックされます。
src を動的に調整するには、ビデオから始める必要があります。
$("#video-box video") ).prop(" src",src)

Answer 3

source タグを使用せず、代わりに attr() を使用して video タグに直接書き込みます。あと、videoタグの幅と高さはスタイルに書かずに取​​り出してください〜

Answer 4

jsfidle はビデオを埋め込むことができません。ローカルに変更するだけです。

Answer 5

video タグでサポートされているビデオ形式には、(1) H.264 でエンコードされた mp4 ファイル (2) webm (3) ogg が含まれます。他のサフィックスを持つファイルは、特許の問題などにより一時的にサポートされていません。トランスコーディングを検討して試すことができます。それ

Answer 6

play() イベントを追加するだけです