html вграден етикет видео събития

Използвам html етикет за вграждане, за да стартирам видеоклипа си. Но имам проблем да получа събитието му, искам да извикам функция, когато се задейства събитие за възпроизвеждане или пауза. Също така искам видеото да се възпроизвежда, когато щракна върху бутона за възпроизвеждане.

Трябва ми помощта ти:

Моят код е по-долу -

<!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
‹embed wmode=transparent allowscriptaccess=always id=test src=player.vimeo.com/video/76979871 width=600 height=600 frameborder=0 onplay=alert('calling'); onclick=alert('hello');›‹/embed›   -  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
Просто се уверете, че използвате Vimeo iframe вграждане и гледайте за раздела за 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