css 鼠标悬停播放视频 - 拇指

Posted 2021-05-13

<div class="thumb" onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
  <video muted id="video1" onmouseover="this.play()" onmouseout="this.pause()">
    <source src="http://mazwai.com/system/posts/videos/000/000/140/preview_mp4_2/joel_gerlach--rain-shot_in_los_angeleswith_the_panasonic_gh4.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

<div class="thumb" onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
  <video muted id="video2" onmouseover="this.play()" onmouseout="this.pause()">
    <source src="http://mazwai.com/system/posts/videos/000/000/148/preview_mp4/kenji_kawasawa-106_balloons.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  </div>

  <div class="thumb" onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
  <video muted loop id="video3" onmouseover="this.play()" onmouseout="this.pause()">
    <source src="http://mazwai.com/system/posts/videos/000/000/123/preview_mp4/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  </div>
  
  <div class="thumb" onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
  <video muted id="video4" onmouseover="this.play()" onmouseout="this.pause()">
    <source src="http://mazwai.com/system/posts/videos/000/000/087/preview_mp4_2/raoul-kopacka__two-horned-chameleon.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 

Play video-thumbs on mouseover
------------------------------


A [Pen](https://codepen.io/babrough/pen/oorLOG) by [Brentley Broughton](https://codepen.io/babrough) on [CodePen](https://codepen.io).

[License](https://codepen.io/babrough/pen/oorLOG/license).

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
	"mp3": "audio/mpeg",
	"mp4": "audio/mp4",
	"ogg": "audio/ogg",
	"wav": "audio/wav"
}

function createsoundbite(sound){
	var html5audio=document.createElement('audio')
	if (html5audio.canPlayType){ //check support for HTML5 audio
		for (var i=0; i<arguments.length; i++){
			var sourceel=document.createElement('source')
			sourceel.setAttribute('src', arguments[i])
			if (arguments[i].match(/\.(\w+)$/i))
				sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
			html5audio.appendChild(sourceel)
		}
		  html5audio.load()
		  html5audio.playclip=function(){
			html5audio.pause()
			html5audio.currentTime=0
			html5audio.play()
		}
		return html5audio
	}
	else{
		return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
	}
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("http://www.cartelle.nl/media/audio/tick.ogg", "http://www.cartelle.nl/media/audio/tick.mp3")
var clicksound=createsoundbite("http://www.ultranoir.com/cdn/gene/sound/clack.ogg", "http://www.ultranoir.com/cdn/gene/sound/clack.m4a")

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

body{
  background: black;
  }

.thumb{
   cursor: pointer;
}

video{
    float: left;
    position: relative;
    width: 50%;
    height: auto;
    opacity: 1;
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
}

video:hover{
    opacity: 0.5;
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}