เปลี่ยนเส้นทางวิดีโอ html5 หลังจากเล่น

<script type="text/javascript">
// Do not name the function "play()"
function playVideo(){
    var video = document.getElementById('video');
    video.play();
    video.addEventListener('ended',function(){
        window.location = 'http://www.google.com';
    });
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
    <source src="video/Motion.mp4" type="video/mp4" />
</video>

นี่คือรายการกิจกรรมสื่อที่คุณสามารถเชื่อมโยงได้: http://dev.w3.org/html5/spec/Overview.html#mediaevents

ฉันพบสิ่งนี้ในเว็บไซต์อื่น ดูเหมือนว่าจะทำงานได้ดี...

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript">
      $(document).ready(function(){   
       $("#myVideo").bind('ended', function(){
          location.href="http://www.localhost.com";   
       }); 
      });
    </script>

    <video id="myVideo" width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
        Your browser does not support the video tag.
    </video>

มีวิธีแก้ไขให้ใช้งานได้กับวิดีโอที่เล่นอัตโนมัติหรือไม่ ฉันคิดว่า src="text/javascript" แทนที่จะเป็น type="text/javascript" เป็นสิ่งที่กำลังฆ่าฉันอยู่ จากนั้นฉันก็พบว่าฉันได้รับผลลัพธ์ที่ไม่สอดคล้องกันในเบราว์เซอร์หลายตัว เท่าที่ฉันสามารถติดตามได้ ผู้ที่ตีความการเล่นอัตโนมัติอย่างถูกต้องนั้นไม่ได้รันโค้ดนี้อย่างถูกต้อง เนื่องจากในทางเทคนิคแล้วไม่มี 'onclick'; วิดีโอดำเนินไปอย่างสนุกสนานด้วยตัวมันเอง โดยไม่เคยกระตุ้นฟังก์ชันนี้เลย

ข้อมูลโค้ดของ Ashley ใช้งานได้สำหรับฉัน แม้ว่าฉันต้องแน่ใจว่าไม่ได้ใช้พารามิเตอร์ "loop" ในแท็กวิดีโอ ไม่เช่นนั้นจะไม่ทำงาน

นอกจากนี้ ฉันยังสามารถให้เล่นอัตโนมัติได้ ดังที่คุณเห็นในตัวอย่างนี้:

<video id="thevideo" width="1280" preload="auto" autoplay="autoplay"> 
  <source src="your-video.mp4" type="video/mp4" />
  <source src="your-video.ogv" type="video/ogg" />
  Your browser does not support the video tag.
</video>

หากคุณต้องการหลีกเลี่ยงการฮาร์ดโค้ด URL ในแอปพลิเคชันของคุณ และคุณเพียงต้องการรีเซ็ตวิดีโอของคุณและไม่จำเป็นต้องไปที่หน้าอื่น ฉันพบว่าสิ่งนี้ค่อนข้างเรียบร้อย

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" /> 
<script type="text/javascript">
            $(document).ready(function(){   
                $("#yourVideoID").bind('ended', function(){
                    location.reload(false);                     
                }); 
            });
</script>

คุณไม่จำเป็นต้องระบุ URL หน้าปัจจุบันที่มีวิดีโอของคุณจะถูกโหลดซ้ำจากแคช (ถ้าเป็นไปได้) ดังนั้นคุณจึงไม่ต้องเสียเวลาพูดคุยกับเซิร์ฟเวอร์อีกเพียงเพื่อแสดงวิดีโออีกครั้ง