2

ユーザーが HTML5 ビデオの画面をクリックすると、新しいウィンドウのリンクに移動するにはどうすればよいですか? 私は周りを見回しましたが、それに関する多くのテキストを見つけることができません。基本的には YouTube などで得られるものと同様の機能です。ユーザーが動画をクリックすると、新しいウィンドウでリンクが表示されます。

次のようなコードを使用します。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
</video>

次のようになると思いますが、機能させることができません。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
<a href='http://www.google.com'> test link</a>
</video>
4

4 に答える 4

0

これが実際の例です：http：//jsfiddle.net/ysttd/

<a>タグを内部に貼り付けるのではなく、とタグを親要素内<video>にラップします。<a><video>

<div class="videoContainer">
    <video width="320" height="240" controls>
      <source src="http://snapshot.opera.com/resources/BigBuckBunny.ogv" type="video/ogg">
    </video>
    <a href='http://www.google.com'> test link</a>
</div>
于 2013-03-20T20:25:34.643 に答える
0

<video>理論的には、それを実現するためにリンクの内側に配置できるはずです。

ただし、指定controlsした動画はインタラクティブコンテンツであるため、許可されていません。

代わりに、JavaScriptを使用できます。

document.querySelector('video').addEventListener('click', function () {
    open("http://example.com", "_blank");
});
于 2013-03-20T20:28:08.497 に答える
0

私があなたの問題を正しく見つけたら、この解決策はあなたを助けることができます

<a href="http://google.com" target="_blank">
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4" />
        <source src="movie.ogg" type="video/ogg" />
        <source src="movie.webm" type="video/webm" />
    </video>
    </a>

http://jsfiddle.net/bXrPL/

于 2013-03-20T20:18:21.323 に答える
0

これも試すことができます：

<video width="320" height="240" onclick="window.open('http://google.com')" controls>
    <source src="movie.mp4" type="video/mp4"/>
    <source src="movie.ogg" type="video/ogg"/>
    <source src="movie.webm" type="video/webm"/>
</video>
于 2013-03-20T20:35:46.753 に答える