2

単純なループ html5 ビデオの聖杯を探しています。現在、動作していないように見える次のコードを使用しています。

<video width="650" height="650" class="outer_shadow" autoplay="" ended="this.play()" loop>
    <source src="/videos?video_id=ag1kZXZ-anQtd2luZG93cg4LEghUaW1lRGF0YRgNDA">
</video>

このコードが機能しない理由を強調したり、最善の作業を提案したりできる人はいますか?

4

2 に答える 2

1

loop確かに、属性を設定する必要があるだけです（ Chromeでテストされたフィドルを参照）：

<video id="myVideo" width="650" height="650" class="outer_shadow" autoplay loop>
    <source src="http://content.bitsontherun.com/videos/nPripu9l-60830.mp4">
</video>​

Firefox がまだ属性を気に入らない場合はloop、次の修正を試してください。 

document.getElementById('myVideo').addEventListener('ended', function(){
    this.currentTime = 0;
}, false);

アップデート：

期待したほど単純ではないかもしれませんが、問題の回避策として、video.jsなどの多くの HTML5 ビデオ ライブラリのいずれかを試す価値があるかもしれません。問題が解決しない場合は、最悪の場合、サポートされている場所 (デスクトップなど) ではライブラリに強制的に Flash を使用させ、そうでない場所では HTML5 にフォールバックさせることができます (ここで説明)。

于 2012-11-07T12:44:13.447 に答える
0

これは、いくつかのビデオをループするHTML5ビデオ プレーヤーの実際の例です。URLをsrc配列に追加するだけです...

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<video id="video" width="500" height="400" controls autoplay></video>
<script>
var src = [
 "http://content.adfox.ru/131007/adfox/205544/865991_11.mp4",
 "http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4"
];
var curSrc = 0;
$(function() {
 $('#video').attr("src", src[curSrc % src.length]);
 curSrc++;
 var video = $('#video').get(0);

 $('#video')
 .on('loadedmetadata', function() {
  video.currentTime=0.01;
  video.play();
 })
 .on('ended', function() {
  console.log('ended');
  video.src = src[curSrc % src.length];
  video.load();
  curSrc++;
 });
});
</script>
于 2014-12-04T02:26:33.453 に答える