javascript - HTML5ビデオとJavascriptを使用したカスタムコントロール付きのビデオ

Question

ビデオをクリックする（またはdivをオーバーレイする）だけで再生/一時停止するデフォルトのコントロールなしでHTML5ビデオプレーヤーを作成しようとしています。デフォルトのコントロールを完全に非表示にしたい。ユーザーがビデオをクリックすることによってのみ一時停止/再生できるようにしたい。これは可能ですか？私の最初の戦略は、再生/一時停止ボタンとして機能する要素の上に透明なdivをオーバーレイすることでした。以下は私が始めたHTMLとjavascriptですが、少し助けが必要です。みんな、ありがとう！

<!-- Video -->
<div style="height:980px;height:540px;">
    <div style="z-index:100;position:absolute;">
        <video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
            <source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
        </video>
    </div>
    <div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video --> 




    <!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
    var videoEl = $('#myVideo');
    playPauseBtn = $('#imgPoster');

    playPauseBtn.bind('click', function () {
        if (videoEl.paused) {
            videoEl.play();
        } else {
            videoEl.pause();
        }
    });

    videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->

score 2 · Accepted Answer

ビデオタグに2つのid属性は必要ありません。また、1つのファイル形式のみを使用し、リンク先のビデオとポスターが存在しない場合は、個別のソースタグは必要ありません。

とにかく、以下の例：

<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>

<script type="text/javascript">
  $("#myVideo").bind("click", function () {
    var vid = $(this).get(0);
        if (vid.paused) {
          vid.play();
        } else {
          vid.pause();
        }
  });
</script>

編集：フィドルを追加する：http：//jsfiddle.net/SKfBY/

あなたのサイトをざっと見て、ビデオはかっこいいです:-)よく見ると、2つのjQueryファイルが追加されていることがわかります。ここでは実際には問題ありませんが、必要なのは1つだけで、2つ目はページの読み込みが遅くなります。また、問題はありませんが、ビデオ要素はHTML5であるため、以下のようなHTML5 doctypeの使用を検討する必要がありますが、ほとんどのブラウザーはとにかくそれを理解します。問題は私のせいのようです。jsFiddleは自動的に$document.ready関数を挿入しますが、私の例ではそれを忘れてしまったため、機能しません。

これが私がそれを書く方法の完全な要約です、私はあなたのためにjQueryの両方のインスタンスを削除し、GoogleのバージョンのjQueryに置き換えました、これは通常より良いオプションです、そしてまたあなたはおそらくあなたが必要としないスクリプトを削除するべきです、サイトにswfobjectなどを使用してフラッシュファイルが含まれていない場合にswfObjectを削除するようなものです。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>

<script type="text/javascript">
    $(document).ready(function() {  
      $("#myVideo").bind("click", function () {
        var vid = $(this).get(0);
            if (vid.paused) {
              vid.play();
            } else {
              vid.pause();
            }
      });
    });
</script>
</head>
<body>
    <video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
    </video>
</body>
</html>

score 0 · Accepted Answer

このコードは私のために働きます：

function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}

function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}

function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}

ただし、時間を0に設定すると、ビデオのみが巻き戻されます。再生なし。だから私は巻き戻し後にビデオを再生したかったので、これを思いついた：

function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}

ボタンは次のとおりです。

<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)">&lt;&lt;</button>
<button id="play" onclick="vidplay()">&gt;</button>
<button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
</div>

私の2セントの価値...

乾杯

javascript - HTML5ビデオとJavascriptを使用したカスタムコントロール付きのビデオ

2 に答える 2

Related