Video Play On Mouse Over

New Here ,
Nov 25, 2017 Nov 25, 2017

Copy link to clipboard

Copied

I am creating a website that I need a collum of videos that I want to play when someone hovers their mouse over and will pause when the mouse cursor is not on it then start from where it left off. The video will also loop and has no sound.

I have looked around and there is some HTML5 code that I have found but does not work except with the demo youtube video included. I have added my files to upload (1112.mp4 & 1114.mp4) and they are in my assets so it is not missing the video.

Question 1 is there a way to do it without coding

Question 2 if there is not then what code will work?

Note: I have very limited knowledge when it comes to coding (Thus why I am using muse)

Thank You For Your Help

Code That I Have and Is Leaving A Blank Space:

   <html>

<head>

</head>

<body>

<div style="text-align:center" onmouseover="Play()" onmouseout="Pause()">

  <video id="f150" width="480">

    <source src="1112.mp4" type="video/mp4" />

    Your browser does not support HTML5 video.

  </video>

</div>

<script type="text/javascript">

var myVideo=document.getElementById("video1");

function Pause()

{

  myVideo.pause();

}

function Play()

{

if (myVideo.paused)

  myVideo.play();    

}   

   

</script>

</body>

</html>

Code That has a Video that worked until I added a second HTML object:

   <html>

<head>

</head>

<body>

<div style="text-align:center" onmouseover="Play()" onmouseout="Pause()">

  <video id="other" width="480">

    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />

    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />

    Your browser does not support HTML5 video.

  </video>

</div>

<script type="text/javascript">

var myVideo=document.getElementById("video1");

function Pause()

{

  myVideo.pause();

}

function Play()

{

if (myVideo.paused)

  myVideo.play();    

}   

   

</script>

</body>

</html>

Views

1.7K

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Most Valuable Participant , Nov 25, 2017 Nov 25, 2017
wtsund  wroteQuestion 1 is there a way to do it without codingQuestion 2 if there is not then what code will work?Note: I have very limited knowledge when it comes to coding (Thus why I am using muse)not a video but an animated gif is easy to add into the rollover state... place a still image (or blank) in the normal statetutorial for making animated gifs = https://helpx.adobe.com/au/photoshop/how-to/make-animated-gif.html

Likes

translate

Translate

Translate
Most Valuable Participant ,
Nov 25, 2017 Nov 25, 2017

Copy link to clipboard

Copied

wtsund  wrote

Question 1 is there a way to do it without coding

Question 2 if there is not then what code will work?

Note: I have very limited knowledge when it comes to coding (Thus why I am using muse)

not a video but an animated gif is easy to add into the rollover state... place a still image (or blank) in the normal state

tutorial for making animated gifs = https://helpx.adobe.com/au/photoshop/how-to/make-animated-gif.html

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 26, 2017 Nov 26, 2017

Copy link to clipboard

Copied

Thinking outside the box, good idea

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines