| Autor | Zpráva | ||
|---|---|---|---|
| tozi Profil |
#1 · Zasláno: 11. 9. 2014, 12:58:33
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 |
#3 · Zasláno: 11. 9. 2014, 14:24:52 · Upravil/a: tozi
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"> </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()">></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' />";Tak už mi to ide. |
||
|
Časová prodleva: 4 dny
|
|||
| 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 :) |
||
|
Časová prodleva: 11 let
|
|||
0