html встраивание тегов видеособытий

Я использую тег html embed для запуска своего видео. Но я столкнулся с проблемой, чтобы получить его событие, я хочу вызвать функцию, когда запускается событие воспроизведения или паузы. Также я хочу, чтобы видео воспроизводилось, когда я нажимал кнопку воспроизведения.

Мне требуется ваша помощь:

Мой код ниже -

<!DOCTYPE html>
<html>
  <head></head>
    <body>
        <div class="modal-box">
            <div class="modal-box-content">
                <embed id="video1" src="http://player.vimeo.com/video/76979871" width="600" height="600" frameborder="0"></embed>
            </div>
        </div>
        <button id="playButton" style="width: 80px" >Play</button>
        <div >Elapsed Time: <span id="timeDisplay"></span></div>

      <!-- Button width set so overall size doesn't change when we toggle the label -->



       <script>

         var oVideo = document.getElementById("video1");      //video element
         var button = document.getElementById("playButton");
         var display = document.getElementById("timeDisplay");


         //  Capture time changes and display current position
         oVideo.addEventListener("timeupdate", function () {
           display.innerText = oVideo.currentTime.toFixed(2) ;
         }, false);

         button.addEventListener("click", function () {
           //  toggle between play and pause based on the paused property
           if (oVideo.paused) {
             var oInput = document.getElementById('videoFile');   //text box
             if (oInput.value) {
               //  only load a video file when the text field changes
               if (oInput.value != oVideo.src) {
                 oVideo.src = oInput.value;
                 oVideo.load();
               }
               oVideo.playVideo();
             }
           } else {

             oVideo.pauseVideo();
           }
         }, false);

         // Capture the play event and set the button to say pause
         oVideo.addEventListener("onplay", function () {
           button.innerHTML = "Pause";
         }, false);

         // Capture the pause event and set the button to say play
         oVideo.addEventListener("onpause", function () {
           button.innerHTML = "Play";
         }, false);


         </script>
</body>
</html>

javascript html embed video
person Anupam Sharma    schedule 24.03.2015    source источник
comment
Знаете ли вы, что контент, загруженный через вставку, является HTML-страницей?   -  person akmozo    schedule 24.03.2015
comment
@akmozo, но когда я пишу событие onplay, оно тоже не работает :(   -  person Anupam Sharma    schedule 24.03.2015
comment
‹встроить wmode=transparent allowscriptaccess=always id=test src=player.vimeo.com/video/76979871 width=600 height=600 frameborder=0 onplay=alert('вызов'); onclick=alert('привет');›‹/встроить›   -  person Anupam Sharma    schedule 24.03.2015
comment
Вы не поняли, что я имел в виду! С этой HTML-страницей ничего нельзя сделать!!! Если вы хотите управлять видео, вы должны встроить само видео в видеоэлемент HTML5 (или другой управляемый проигрыватель), а не в HTML-страницу, в которую встроено это видео !!!   -  person akmozo    schedule 24.03.2015
comment
@akmozo - хорошо, но akmozo, когда я добавляю тег видео, не поддерживает мое видео с vimeo. код - ‹video id=video1 src=player.vimeo.com/video/76979871 / ›   -  person Anupam Sharma    schedule 24.03.2015
comment
Конечно, это не так, потому что ссылка, которую вы используете для HTML-страницы! Вы должны получить ссылку на видео, чтобы использовать его на своей странице. Я не знаю, может быть, у них есть какой-то API или что-то в этом роде, чтобы получить URL-адрес видео для встраивания на внешние сайты.   -  person akmozo    schedule 24.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Проблема, почему ваш код не работает, заключается в том, что вы пытаетесь вызвать функции DOM для встроенного видео, что не сработает.

К счастью, это можно сделать с помощью хорошего плагина, который можно найти здесь: Vimeo-jQuery-API
Просто убедитесь, что вы используете встроенный iframe Vimeo и посмотрите для раздела о событиях API для ваших нужд. Обратите внимание, что это будет работать только для встроенных видео Vimeo.

Включите код плагина после Jquery, после чего вы сможете привязать прослушиватели событий к идентификатору iframe:

$("#myvideo").on("play", function(){
    alert('Playing!');
});

$("#myvideo").on("pause", function(){
    alert('Pausing!');
});

Рабочий JSfiddle: https://jsfiddle.net/vvemqpvg/1/

person Mike Hanslo    schedule 24.03.2015