Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    tag video html 4 e html 5

    Inanzitutto mi presento e saluto tutti :-), sono un nuovo iscritto di questo forum e come molti di voi mi diverto con l'html nel creare semplici pagine web (ora sto studiando anche php e mysql) :-). Documentandomi sull'html5 (grazie a Google) ho visto e testato il tag video e per la precisione, questo pezzo di codice che riporto qui di seguito e che ho visto direttamente sul sito w3schools.com:

    codice:
    <video src="movie.ogg" controls="controls">your browser does not support the video tag</video>
    Vorrei sapere, se lo stesso codice e' valido anche per l'html 4 o se eventualmente esiste il modo di riprodurre lo stesso risultato usando l'html4 piuttosto che il 5

  2. #2
    Utente di HTML.it L'avatar di alexba64
    Registrato dal
    Jul 2001
    Messaggi
    2,476
    Che formato è .ogg ???

  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    90
    Assolutamente non è valido per l'HTML4. Il tag <video> è uno dei più attesi e benvoluti dell'HTML5.
    In HTML4 devi usare obbligatoriamente il tag <object>

  4. #4
    quindi posso ottenere lo stesso risultato ma con il tag <object>?

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    90
    Il risultato non è lo stesso, altrimenti non avrebbe senso l'esistenza di <video> e <audio> in HTML5.
    Mentre quest'ultimo è estremamente semplice da gestire, nelle funzionalità semplici e avanzate, non si può dire lo stesso per HTML4, che deve fare ricorso obbligatoriamente ai plugin, rendendo il tutto molto più complesso.
    Vedi qui:
    http://xhtml.html.it/guide/lezione/1...il-tag-object/
    http://xhtml.html.it/articoli/leggi/...a-di-html-5/4/

  6. #6
    Utente di HTML.it L'avatar di seingh
    Registrato dal
    Nov 2009
    Messaggi
    61
    io dico che lo puoi emulare con javascript:
    passo 1: crei un file e lo chiami html5.js
    passo 2: ci incolli il codice seguente:
    codice:
    /*@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)})@*/
    
    
    var addEvent = (function () {
      if (document.addEventListener) {
        return function (el, type, fn) {
          if (el && el.nodeName || el === window) {
            el.addEventListener(type, fn, false);
          } else if (el && el.length) {
            for (var i = 0; i < el.length; i++) {
              addEvent(el[i], type, fn);
            }
          }
        };
      } else {
        return function (el, type, fn) {
          if (el && el.nodeName || el === window) {
            el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
          } else if (el && el.length) {
            for (var i = 0; i < el.length; i++) {
              addEvent(el[i], type, fn);
            }
          }
        };
      }
    })();
    
    (function () {
    
    var pre = document.createElement('pre');
    pre.id = "view-source"
    
    // private scope to avoid conflicts with demos
    addEvent(window, 'click', function (event) {
      if (event.target.hash == '#view-source') {
        // event.preventDefault();
        if (!document.getElementById('view-source')) {
          pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
          document.body.appendChild(pre);      
        }
        document.body.className = 'view-source';
        
        var sourceTimer = setInterval(function () {
          if (window.location.hash != '#view-source') {
            clearInterval(sourceTimer);
            document.body.className = '';
          }
        }, 200);
      }
    });
      
    })();
    passo 3 metti nella tua pagina questo:
    codice:
       <video>
        <source src="NOME FILE.ESTENSIONE" />
      </video>
      <p id="controls">
        <input type="button" id="play" value="play">
        <span id="position">00:00</span> / <span id="duration">loading...</span>
      </p>
      
    
    </p>
      
    
    </p>
    
    <script>
    var video = document.querySelector('video'),
        togglePlay = document.querySelector('#play'),
        position = document.querySelector('#position'),
        using = document.querySelector('#using'),
        ready = false,
        controls = document.querySelector('#controls'),
        fullscreen = null;
    
    addEvent(togglePlay, 'click', function () {
      if (ready) {
        video.playbackRate = 0.5;
        if (video.paused) {
          if (video.ended) video.currentTime = 0;
          video.play();
          this.value = "pause";
        } else {
          video.pause();
          this.value = "play";
        }
      }
    });
    
    addEvent(video, 'timeupdate', function () {
      position.innerHTML = asTime(this.currentTime);
    });
    
    addEvent(video, 'ended', function () {
      togglePlay.value = "play";
    });
    
    addEvent(video, 'canplay', function () {
      video.muted = true;
      ready = true;
      document.querySelector('#duration').innerHTML = asTime(this.duration);
      using.innerHTML = this.currentSrc;
      // note: .webkitSupportsFullscreen is false while the video is loading, so we bind in to the canplay event
      if (video.webkitSupportsFullscreen) {
        fullscreen = document.createElement('input');
        fullscreen.setAttribute('type', 'button');
        fullscreen.setAttribute('value', 'fullscreen');
        controls.insertBefore(fullscreen, controls.firstChild);
        addEvent(fullscreen, 'click', function () {
          video.webkitEnterFullScreen();
        });
      }
    
    });
    
    function asTime(t) {
      t = Math.round(t);
      var s = t % 60;
      var m = Math.round(t / 60);
      
      return two(m) + ':' + two(s);
    }
    
    function two(s) {
      s += "";
      if (s.length < 2) s = "0" + s;
      return s;
    }
    </script>
    passo 4 modifichi NOME FILE.ESTENSIONE con hai capito cosa :P
    e hai finito

  7. #7

  8. #8
    Utente di HTML.it L'avatar di seingh
    Registrato dal
    Nov 2009
    Messaggi
    61
    prego

  9. #9
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    90
    Originariamente inviato da seingh
    io dico che lo puoi emulare con javascript:
    passo 1: crei un file e lo chiami html5.js
    passo 2: ci incolli il codice seguente:
    codice:
    /*@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)})@*/
    
    
    var addEvent = (function () {
      if (document.addEventListener) {
        return function (el, type, fn) {
          if (el && el.nodeName || el === window) {
            el.addEventListener(type, fn, false);
          } else if (el && el.length) {
            for (var i = 0; i < el.length; i++) {
              addEvent(el[i], type, fn);
            }
          }
        };
      } else {
        return function (el, type, fn) {
          if (el && el.nodeName || el === window) {
            el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
          } else if (el && el.length) {
            for (var i = 0; i < el.length; i++) {
              addEvent(el[i], type, fn);
            }
          }
        };
      }
    })();
    
    (function () {
    
    var pre = document.createElement('pre');
    pre.id = "view-source"
    
    // private scope to avoid conflicts with demos
    addEvent(window, 'click', function (event) {
      if (event.target.hash == '#view-source') {
        // event.preventDefault();
        if (!document.getElementById('view-source')) {
          pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
          document.body.appendChild(pre);      
        }
        document.body.className = 'view-source';
        
        var sourceTimer = setInterval(function () {
          if (window.location.hash != '#view-source') {
            clearInterval(sourceTimer);
            document.body.className = '';
          }
        }, 200);
      }
    });
      
    })();
    passo 3 metti nella tua pagina questo:
    codice:
       <video>
        <source src="NOME FILE.ESTENSIONE" />
      </video>
      <p id="controls">
        <input type="button" id="play" value="play">
        <span id="position">00:00</span> / <span id="duration">loading...</span>
      </p>
      
    
    </p>
      
    
    </p>
    
    <script>
    var video = document.querySelector('video'),
        togglePlay = document.querySelector('#play'),
        position = document.querySelector('#position'),
        using = document.querySelector('#using'),
        ready = false,
        controls = document.querySelector('#controls'),
        fullscreen = null;
    
    addEvent(togglePlay, 'click', function () {
      if (ready) {
        video.playbackRate = 0.5;
        if (video.paused) {
          if (video.ended) video.currentTime = 0;
          video.play();
          this.value = "pause";
        } else {
          video.pause();
          this.value = "play";
        }
      }
    });
    
    addEvent(video, 'timeupdate', function () {
      position.innerHTML = asTime(this.currentTime);
    });
    
    addEvent(video, 'ended', function () {
      togglePlay.value = "play";
    });
    
    addEvent(video, 'canplay', function () {
      video.muted = true;
      ready = true;
      document.querySelector('#duration').innerHTML = asTime(this.duration);
      using.innerHTML = this.currentSrc;
      // note: .webkitSupportsFullscreen is false while the video is loading, so we bind in to the canplay event
      if (video.webkitSupportsFullscreen) {
        fullscreen = document.createElement('input');
        fullscreen.setAttribute('type', 'button');
        fullscreen.setAttribute('value', 'fullscreen');
        controls.insertBefore(fullscreen, controls.firstChild);
        addEvent(fullscreen, 'click', function () {
          video.webkitEnterFullScreen();
        });
      }
    
    });
    
    function asTime(t) {
      t = Math.round(t);
      var s = t % 60;
      var m = Math.round(t / 60);
      
      return two(m) + ':' + two(s);
    }
    
    function two(s) {
      s += "";
      if (s.length < 2) s = "0" + s;
      return s;
    }
    </script>
    passo 4 modifichi NOME FILE.ESTENSIONE con hai capito cosa :P
    e hai finito
    Bellissimo!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.