Arahkan ulang video HTML5 setelah diputar

Saya memiliki video html 5 yang saya hapus tombol kontrolnya dan menambahkan kode js agar pengguna dapat memutar video tersebut ketika video tersebut diklik. Yang perlu saya lakukan adalah mengikat skrip tambahan yang akan mengarahkan ulang halaman setelah video diputar tanpa memuat ulang halaman. Di bawah ini adalah kode js saya.

function play(){
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
}

Dan Ini Kode Video HTML5 saya

<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>

javascript html html5-video
person jalf    schedule 02.05.2012    source sumber

Jawaban (5)


arrow_upward
13
arrow_downward 

<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>

Berikut adalah daftar acara media yang dapat Anda ikat: http://dev.w3.org/html5/spec/Overview.html#mediaevents

person AlienWebguy    schedule 02.05.2012
comment
Terima kasih AlienWebGuy. Akan mencobanya sekarang. Terima kasih juga atas tautannya - person jalf; 03.05.2012
comment
maaf AlienWebguy, itu tidak berhasil. halaman tidak dialihkan setelah video berakhir - person jalf; 03.05.2012
comment
Saya mengerti apa yang terjadi, fungsi Anda bernama putar, tetapi onclick="play()" Anda memutar video tidak menjalankan fungsi itu. Baru saja mengganti namanya fungsinya. - person AlienWebguy; 03.05.2012
comment
Hai Alien Ini berfungsi sekarang, yang saya lakukan adalah memisahkan skrip dari acara yang berakhir. Terima kasih banyak - person jalf; 03.05.2012

arrow_upward
7
arrow_downward

Saya menemukan ini di situs lain. Tampaknya bekerja dengan baik...

    <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>
person Ashley    schedule 06.08.2013

arrow_upward
2
arrow_downward

Apakah ada cara untuk memodifikasinya agar berfungsi dengan video yang diputar otomatis? Saya pikir src='text/javascript' bukannya type='text/javascript' yang membunuh saya, kemudian saya menyadari bahwa saya mendapatkan hasil yang tidak konsisten di beberapa browser. Sejauh yang saya bisa lacak, mereka yang menafsirkan putar otomatis dengan benar tidak mengeksekusi kode ini dengan benar karena secara teknis tidak ada 'onclick'; video berjalan dengan sendirinya, tidak pernah memicu fungsinya.

person Joe Hundredaire    schedule 05.11.2012

arrow_upward
0
arrow_downward

Cuplikan kode Ashley berfungsi untuk saya, meskipun saya harus memastikan untuk tidak menggunakan parameter "loop" di tag video, jika tidak maka tidak akan berfungsi.

Selain itu, saya dapat memutarnya secara otomatis, seperti yang Anda lihat dalam contoh ini:

<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>
person Isaac M    schedule 06.11.2014

arrow_upward
0
arrow_downward

Jika Anda ingin menghindari URL pengkodean keras dalam aplikasi Anda, dan Anda hanya ingin mengatur ulang video Anda dan belum tentu menavigasi ke halaman lain, menurut saya ini cukup rapi.

<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>

Anda tidak perlu menentukan URL, halaman saat ini yang berisi video Anda dimuat ulang dari cache (jika memungkinkan) sehingga Anda tidak perlu lagi berbicara dengan server hanya untuk menampilkan ulang video tersebut.

person Manni Dee    schedule 19.11.2014