Witam mam pewien problem, który wypadałoby rozwiązać.
Dokładnie chodzi o to że udało mi się na strone załadować Video i nadać funkcję po najechaniu aby się odtworzył a po zjechaniu myszką aby się zatrzymał
Gdy ładuje obok drugi film który ma margin: 0px 0px 0px 33%; i trzeci film margin: 0px 0px 0px 66% oczywiscie wszystkie maja position fixed to niestety to nie działa
Pewnie chodzi o function play i pause aby powielić na inne ID ale niestety nie wiem jak to zrobić
http://www.marcinwachecki.pl/exakt/
Tak wygląda kod z 1 filmem
<video style="float: left; width: 100%; height: auto; z-index: 1; position: fixed;" id="video1">
<source style="z-index: 2;" src="http://www.marcinwachecki.pl/video.mp4" type="video/mp4">
</video>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
(function() {
var video = document.getElementById('video1')
video.onmouseover = function() {
playPause()
}
video.onmouseout = function() {
playPause();
}
})()
A tak wygląda z 3 filamami
<video style="float: left; width: 100%; height: auto; z-index: 1; position: fixed;" id="video1">
<source style="z-index: 2;" src="http://www.marcinwachecki.pl/video.mp4" type="video/mp4">
</video>
<video style="float: left; width: 100%; height: auto; z-index: 1; position: fixed; margin: 0px 0px 0px 33%;" id="video2">
<source style="z-index: 2;" src="http://www.marcinwachecki.pl/video.mp4" type="video/mp4">
</video>
<video style="float: left; width: 100%; height: auto; z-index: 1; position: fixed; margin: 0px 0px 0px 33%;" id="video3">
<source style="z-index: 2;" src="http://www.marcinwachecki.pl/video.mp4" type="video/mp4">
</video>
<script>
var myVideo=document.getElementById("video1");
var myVideo=document.getElementById("video2");
var myVideo=document.getElementById("video3");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
(function() {
var video = document.getElementById('video1')
var video = document.getElementById('video2')
var video = document.getElementById('video3')
video.onmouseover = function() {
playPause()
}
video.onmouseout = function() {
playPause();
}
})()
Może ktoś podpowie gdzie robie błąd, zaznaczam że znam się tylko na HTMl-u nie znam się na Jqery i php