时间戳

首页 > 解决方案 > Can't reproduce mi video with Javascript

javascript - Can't reproduce mi video with Javascript

问题描述

I'm a new in this world. I won't be questioning every step promised ^^' but, I am following a tutorial which is pretty good but the problem comes when the < video > tag part in JS, which is from 2014...so there are probably updates since then. Well, I can't get the < video > working when I wish to press the "Play" button. I've done the same as him + the possible updates (such as: simple "()", type for source, etc). Nothing :/ However, if I add into HTML sheet, (< script > tag) it works....

HTML

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>CANARIAS</title>
    <meta name="Generator" content="Cocoa HTML Writer">
    <meta name="CocoaVersion" content="1404.47">
   
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="main.js">
  </head>
    </script>
    
    <body>
      <section id="video">
        <video id="mivideo" width="720" loop>
          <source src="/video/video-2012-04-05-14-22-32.mp4" type="video/mp4">
          <source src="/video/video-2012-04-05-14-22-32.ogg" type="video/ogg">
          <source src="/video/video-2012-04-05-14-22-32.webm" type="video/webm">
        </video>
    
        <nav>
          <div id="botones">
            <button type="button" id="reproducir">Play</button>
          </div>
    
          <div id="barra">
            <div id="progreso"></div>
          </div>
        </nav>
      </section>
    
    </body>
    </html>

JAVASCRIPT

var mivideo, reproducir, barra, progreso;

function comenzar() {
    mivideo = document.getElementById("mivideo");
    reproducir = document.getElementById("reproducir");
    barra = document.getElementById("barra");
    progreso = document.getElementById("progreso");

    reproducir.addEventListener("click", clicando, false);
    progreso.addEventListener("click", adelantando, false)
}

function clicando() {

    if ((mivideo.paused==false) && (mivideo.ended==false)) {
        mivideo.pause();
        reproducir.innerHTML = "Play";
    }
    else {
        mivideo.play();
        reproducir.innerHTML = "Pause";
    }
}
window.addEventListener("load", comenzar, false);

标签： javascripthtmlcss

解决方案

If you thinks that it work fine with internal Js but not with external one, Then I thinks that the problem is that you haven't linked your JavaScript file with you HTML one.

Check out the complete guide on how and where to correctly link a Js file in HTML...

推荐阅读