Autor Zpráva
tozi
Profil
Ahojte, vie mi niekto poradiť ako na vlastné buttony v html5 pre video? Rád by som mal pod videom play,pause,stop,mute,unmute...Vyriešené obrázkom najlepšie.

Teda predpokladám že skôr sa bude jednať o jquery. Niečo som už prečítal,ale nedarí sa mi nič rozbehať.


Ďakujem za odpoveď.
RockFire
Profil
Microsoft na to má docela pěkný návod.

Mimochodem, nepleť si jQuery s javascriptem ;) Tady například jQuery vůbec nepotřebuješ.
tozi
Profil
Tento návod som samozrejme našiel. Ale nefunguje mi mute podľa tohto návodu.


Kod vyzerá takto

<video id="Video1" class="bg-video">
     <source src="video.mp4" type="video/mp4" />
     <source src="demo.ogv" type="video/ogg" />
     HTML5 Video is required for this example. 
     <a href="video.mp4">Download the video</a> file. 
</video>
<div class="clear">&nbsp;</div>
<div id="buttonbar">

    <button id="play" onclick="vidplay()"><span class="fa fa-play"></span></button>
<button id="mutebutton">Mute</button>
</div>   
<script type="text/javascript">

    function vidplay() {
       var video = document.getElementById("Video1");
     var button = document.getElementById("mutebutton");
       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.innerHTML = "<span class='fa fa-play'></span>";
       } else {
          video.pause();
           button.innerHTML = "<span class='fa fa-pause'></span>";
       }
    }

    function restart() {
        var video = document.getElementById("Video1");
        video.currentTime = 0;
    }

    function skip(value) {
        var video = document.getElementById("Video1");
        video.currentTime += value;
    }  
 button.addEventListener("click", function () {
      if (audioElm.muted == true) {
        audioElm.muted = false;
      } else {
        audioElm.muted = true;
      }
    }, false);
audioElm.addEventListener("volumechange", function () {
      if (audioElm.muted) {
        // if muted, show mute image
        button.innerHTML = button.innerText = "Unmute"; // button text         
      } else {
        // if not muted, show not muted image
        button.innerHTML = button.innerText = "Mute"; // 
      }
    }, false);

    var volumeRange = document.getElementById("volumeRange");
    volumeRange.addEventListener("change", function () {
      audioElm.volume = volumeRange.value / 100; 
    }, false);    

</script>
RockFire
Profil
Takhle je to funkční. Možná by to šlo napsat lépe, ale chodí to ;)
<script type="text/javascript">
    function vidplay() {
       var video = document.getElementById("Video1");
       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }
    
    function vidmute() {
       var video = document.getElementById("Video1");
       var button = document.getElementById("mute");
       if (video.muted) {
          video.muted = false;
          button.textContent = "Mute";
       } else {
          video.muted = true;
          button.textContent = "Unmute";
       }
    }
    
    function stop()
    {
      var video = document.getElementById("Video1");
      var button = document.getElementById("play");
      video.pause();
      video.currentTime = 0;
      button.textContent = ">";
    }   
</script>

</head>
<body>        

<video id="Video1">
//  Replace these with your own video files. 
     <source src="test.mp4" type="video/mp4" />
     <source src="test.ogv" type="video/ogg" />
     HTML5 Video is required for this example. 
     <a href="test.mp4">Download the video</a> file. 
</video>

<div id="buttonbar">
    <button id="stop" onclick="stop()">stop</button>
    <button id="play" onclick="vidplay()">&gt;</button>
    <button id="mute" onclick="vidmute()">mute</button>
</div>    
tozi
Profil
Dokonalé. Ďakujem za lekciu a pomoc.


Posledná otázka. Ako na správne vloženie obrázka ako buttonu do kodu?
Skúsil som to vložiť takto

  if (video.paused) {
          video.play();
           button.innerHTML = "<img src='play.png' width='26' height='26' alt='play' />";
ale nejak mi to nefunguje.


Tak už mi to ide.
tozi
Profil
Jedna otázka. Ako sa dá spraviť aby defaultne nešiel zvuk. Až po stlačení buttonu aby sa zapol?
edit:Už som to našiel muted :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: