Блог

Главная - Вопросы по программированию - Добавить событие после завершения воспроизведения видео

Добавить событие после завершения воспроизведения видео

#javascript #video #html5-video #media-player #video.js

#javascript #Видео #html5-видео #медиаплеер #video.js

Вопрос:

В проекте Laravel у меня есть видеопроигрыватель, как в этом коде :

 <video
   id="my-video"
   class="video-js "
   controls 
   preload="auto"
   width="100%"
   height="auto"
   poster={{asset('images/'.$course->id.'.png')}}
   data-setup='{"fluid": true}'
   >
   <source src="{{asset('promos/'.$course->id.'.mp4')}}" />
   <source src="{{asset('promos/'.$course->id.'.mp4')}}" />
</video>

Я хочу, чтобы после завершения воспроизведения видео выполнялись действия и действия (добавление данных на сервер), я сделал это, но не работает :

 <script>
    var vid = document.getElementById("my-video");
    vid.onended = function() {
    alert("The video has ended");
};
</script>

Как я могу это решить?

Комментарии:

1. сценарий находится внизу страницы

2. Я использовал addEventListener: vid.addEventListener(‘ended’, (событие) => {действие}; , но все равно не работает

3. Я использую это: videojs.com

Ответ №1:

я надеюсь, что это полезно

 var options = {};
var player = videojs('my-video', options, function onPlayerReady() {
    this.on('ended', function() {
        //do something here...
    });
});

Ou

 var player = document.getElementById("my-video");
player.addEventListener("ended", function() {
  //do something here...
});

Комментарии:

1. плагин javascript для html-видео, вы можете установить его через npm

2. должен ли я его установить или достаточно использовать ссылку cdn

3. из-за первого кода видео не начинает воспроизводиться, а второй не работает

4. да, вы можете использовать CDN link, и не стесняйтесь прочитать несколько документов о том, как интегрировать его в свой проект, это так просто

5. я знаю, что это для завершения события, вот чего ты хочешь?

Ответ №2:

Поскольку Jsplayer работал некорректно, я использовал видеоплеер html5, и все в порядке:-

 <video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
    <source src="{{asset('promos/'.$course->id.'.mp4')}}" type="video/mp4">
    <source src="{{asset('promos/'.$course->id.'.m4v')}}" type="video/ogg">
</video>