12

コントロールなしで自動再生するビデオを配置しようとしていますが、ビデオの下に 3 つのカスタム ボタンを追加したいと考えています。各ボタンはビデオを特定の時間にジャンプさせます。Youtube、Vimeo、またはその他のホストされたビデオを使用していません。特定の時間にリンクできましたが、新しいウィンドウが開き、ブラウザ間の互換性がありません。これは可能ですか？

<video id="movie" style="border:none;" width="575" height="240" preload autoplay controls>
<source src="video.ogv" type="video/ogg; codecs=theora,vorbis" />
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" />
<source src="video.webm" type="video/webm; codecs=vp8,vorbis" />
</video>

<p class="navBtns">
<a href="video.ogv#t=9" target="_blank"><img src="dot.png" /></a>
<a href="video.ogv#t=17" target="_blank"><img src="dot.png" /></a>
<a href="video.ogv#t=29" target="_blank"><img src="dot.png" /></a>
</p>

<script>
var v = document.getElementsByTagName('video')[0];
v.removeAttribute('controls') // '' in Chrome, "true" in FF9 (string)
v.controls // true
</script>
4

2 に答える 2

21

リンクには 2 つの異なる問題があります。

  1. それらには target="_blank" 属性があるため、新しいウィンドウ/タブが開きます。（それらを取り除きます）
  2. ビデオが埋め込まれたページではなく、ビデオ自体にリンクしています。これは期待どおりに機能しません。

ページを離れずにページ上のビデオを直接制御するには、JavaScript が必要です。ここでは、これがどのように機能するかの例を示します。

JS Fiddle: ビデオ CurrentTime の例

リンクの 1 つをクリックすると、特定の時間にジャンプする関数が必要になります。たとえば、次のようになります。

var firstlink = document.getElementByTagName('a')[0];
firstlink.addEventListener("click", function (event) {
    event.preventDefault();
    myvideo.currentTime = 7;
    myvideo.play();
}, false);
于 2013-02-22T14:16:06.753 に答える
5

currentTime動画の属性を設定できます。あなたの例を使用して：

var vidLinks = document.querySelectorAll('.navBtns a');

for(var i = 0, l = vidLinks.length; ++i){
    makeVideoLink(vidLinks[i]);
}

function jumpToTime(time){
    v.currentTime = time;
}

function makeVideoLink(element){
    // Extract the `t=` hash from the link
    var timestamp = element.hash.match(/\d+$/,'')[0] * 1000;

    element.addEventListener('click', function videoLinkClick(e){
        jumpToTime(timestamp);

        return false;
    },false)
}

Mozilla の Developer Network サイトには、HTML5 メディア要素のプロパティの優れたリストがあります。

于 2013-02-22T14:16:21.847 に答える