HTML自動播放一個視頻然後循環另一個

我試圖重新創建robinhood.com有的標題視頻。它暫時播放一個視頻，然後循環播放另一個視頻。這裏就是我試圖得到它的工作：HTML自動播放一個視頻然後循環另一個

<video autoplay="1" class="header-video" id="first_video" preload="1"> 
     <source src="Video1.mp4" type="video/mp4"/> 
    </video> 
    <video class="header-video hidden" id="video_loop" loop="1" preload="1"> 
     <source src="Video2.mp4" type="video/mp4"/> 
    </video>

我認爲這會工作，但它播放第一視頻，然後凍結，不打這應該循環的第二個視頻。所有的幫助將不勝感激，謝謝。

來源

2014-07-02 Justin

從哪裏開始播放秒的視頻？（您必須手動調用'play'，它不會自動啓動） – soktinpk

如果我將自動播放放在第二個視頻標籤上，它將在第一個視頻結束後仍不播放。我正在尋找的是如何在第一個播放後自動播放第二個視頻 – Justin

好的，首先，您只需要'autoplay'，而不是'autoplay =「1」'。 – Jonco98

爲什麼不只是檢查他們的代碼，並以相同的方式解決它？看看在setupVideos()功能在這裏：https://brokerage-static.s3.amazonaws.com/assets/CACHE/js/23d3f56c2529.js

HTML：

<video autoplay="1" class="header-video" id="first_video" preload="1"> 
    <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoFirst.mp4"> 
    <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoFirst.webmhd.webm"> 
    <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoFirst.ogv"> 
</video> 
<video class="header-video hidden" id="video_loop" loop="1" preload="1"> 
    <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoLoop.mp4"> 
    <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoLoop.webmhd.webm"> 
    <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoLoop.ogv"> 
</video>

的Javascript：

$('#first_video').bind('ended', function() { 
    $('#first_video').remove(); 
    $('#video_loop')[0].play(); 
    $('#video_loop').removeClass('hidden'); 
});

來源

2014-07-02 20:37:15 APAD1

它完美的工作，謝謝，我沒有審查他們的代碼，並測試它，但沒有奏效。我認爲這可能與JavaScript有關，但並非100％確定。非常感謝APAD！ – Justin

非常歡迎您！ – APAD1

<!DOCTYPE html> 
 
<html> 
 
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
 
<head> 
 
\t \t <title>websunumu</title> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
     <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t \t <style> 
 
\t \t \t body { 
 
\t \t \t \t font-family: arial, sans-serif; 
 
\t \t \t \t background-color: red; 
 
\t \t \t } 
 
\t \t \t #output { 
 
\t \t \t \t width: 200px; 
 
\t \t \t \t height: 320px; 
 
\t \t \t } 
 
\t \t \t #buffer { 
 
\t \t \t \t display: none; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
    <script type="text/javascript"> 
 
$(document).ready(function(){ 
 
     $("#close").click(function(){ 
 
      $(".sunum").hide(); 
 
     }); 
 
    }); 
 
</script> 
 
\t <h1>transparan video</h1> 
 
\t \t \t <div class="sunum"> 
 
\t \t \t <video id="video" loop="1" preload="1" autoplay style="display:none"> 
 
\t \t \t \t <source src="compressed.mp4" type='video/mp4; codecs="avc1.42E01E"' /> 
 
\t \t \t \t \t \t \t </video> 
 
\t \t \t <canvas width="200" height="640" id="buffer"></canvas> 
 
\t \t \t <canvas width="200" height="320" id="output"></canvas> 
 
\t \t <p> 
 
      <a href="#" id="pause"><img src="pause.png" width="32" height="32" alt=""/></a> 
 
      <a href="#" id="start"><img src="play.png" width="32" height="32" alt=""/></a> 
 
      <a href="#" id="close"><img src="close.png" width="32" height="32" alt=""/></a></p> 
 
      </div> 
 
\t \t </div> 
 
\t \t <script> 
 
\t \t (function(){ 
 
\t \t \t var outputCanvas = document.getElementById('output'), 
 
\t \t \t \t output = outputCanvas.getContext('2d'), 
 
\t \t \t \t bufferCanvas = document.getElementById('buffer'), 
 
\t \t \t \t buffer = bufferCanvas.getContext('2d'), 
 
\t \t \t \t video = document.getElementById('video'), 
 
\t \t \t \t width = outputCanvas.width, 
 
\t \t \t \t height = outputCanvas.height, 
 
\t \t \t \t interval; 
 
\t \t \t function processFrame() { 
 
\t \t \t \t buffer.drawImage(video, 0, 0); 
 
\t \t \t \t // this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas 
 
\t \t \t \t var \t image = buffer.getImageData(0, 0, width, height), 
 
\t \t \t \t \t imageData = image.data, 
 
\t \t \t \t \t alphaData = buffer.getImageData(0, height, width, height).data; 
 
\t \t \t \t for (var i = 3, len = imageData.length; i < len; i = i+4) { 
 
\t \t \t \t \t imageData[i] = alphaData[i-1]; 
 
\t \t \t \t } 
 
\t \t \t \t output.putImageData(image, 0, 0, 0, 0, width, height); 
 
\t \t \t } 
 
\t \t \t video.addEventListener('play', function() { 
 
\t \t \t \t clearInterval(interval); 
 
\t \t \t \t interval = setInterval(processFrame, 40) 
 
\t \t \t }, false); 
 
\t \t \t // Firefox doesn't support looping video, so we emulate it this way 
 
\t \t \t video.addEventListener('ended', function() { 
 
\t \t \t \t video.play(); 
 
\t \t \t }, false); 
 
\t \t \t document.getElementById('start').addEventListener('click', function(event) { 
 
\t \t \t \t video.play(); 
 
\t \t \t \t event.preventDefault(); 
 
\t \t \t }, false); 
 
\t \t \t document.getElementById('close').addEventListener('click', function(event) { 
 
\t \t \t \t video.remove(); 
 
\t \t \t \t event.preventDefault(); 
 
\t \t \t }, false); 
 
\t \t \t document.getElementById('pause').addEventListener('click', function(event) { 
 
\t \t \t \t video.pause(); 
 
\t \t \t \t clearInterval(interval); 
 
\t \t \t \t event.preventDefault(); 
 
\t \t \t }, false); 
 
\t \t })(); 
 
\t \t </script> 
 
</body> 
 
</html>

來源

2018-02-18 20:20:03

你的代碼給出了一個錯誤：「Uncaught ReferenceError：$ is not defined」 –

鑑於你對這個問題的其他刪除答案，我不清楚這是否試圖回答這個問題，其他答案提供了一個鏈接到功能的例子，或者如果你想要問一個新的問題（你的其他答案似乎顯然是一個新問題）。如果您試圖[問一個新問題]（https://stackoverflow.com/questions/ask），那麼請點擊該鏈接來執行此操作。如果你想爲這個答案添加一個例子，那麼你應該[編輯]這個答案在這裏提供它。 – Makyen

HTML自動播放一個視頻然後循環另一個

回答

相關問題