宁静 发表于 2023-4-3 23:00

携手同行（播放器控制视频）

本帖最后由 宁静 于 2023-5-9 12:09 编辑 <br /><br /><style>
#papa {
      margin: 150px 0 0 calc(50% - 590px);
      width: 1100px;
      height: 600px;
      background: url('https://pic.imgdb.cn/item/64218de4a682492fccea0e26.jpg') center/cover no-repeat;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {
      position: absolute;
      display: block;
      opacity: 1;
      animation: opa 20s infinite alternate linear;
}
#mplayer {
      position: absolute;
      left: calc(50% - 15px);
      bottom: 5px;
      width: 30px;
      height: 30px;
      border: 2px solid Snow;
      border-radius: 50%;
      opacity: 0;
      transition: .7s;
      display: grid;
      place-items: center;
      --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
      border-style: solid;
      border-color: Snow;
      cursor: pointer;
      transition: .4s;
}
#mplayer::before {
      width: 0;
      height: 0;
      left: 10px;
      border-width: 10px 12px;
      border-color: transparent transparent transparent Snow;
      opacity: var(--disp1);
}
#mplayer::after {
      width: 2px;
      height: 20px;
      border-width: 0 4px 0 4px;
      opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }

.txtBg {
      position: absolute;
      left: 440px;
       top: 50px;
      font-size: 2.9rem;
      color: transparent;
      width: 500px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-image: linear-gradient(90deg,green,Teal,tomato, green);
      background-size: 500px 100px;
      background-position: 500px 0;
      border: 1px solid;
      background-clip: text;
      -webkit-background-clip: text;
      animation: chgc 2s linear infinite;
}

</style>

<div id="papa">
      <canvas id="canv"></canvas>

<div class="txtBg">携手同行</div>

      <div id="mplayer"></div>
</div>
<audio id="aud" src="https://111t.net/assets/file/zp/20230509120845.mp3" loop autoplay></audio>
<video id="vid" src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/zgsy202.mp4" loop autoplay muted></video>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh, 0, 0, ww + 200, hh + 100);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
<br><br><br><br>

宁静 发表于 2023-4-3 23:02

鼠标滑过画面小播出来，点击可以停止背景视频效果

宁静 发表于 2023-4-3 23:03

一款非常小巧玲珑的可以控制视频效果的小播

沉默 发表于 2023-4-3 23:05

第一时间{:9001:}

宁静 发表于 2023-4-3 23:10

沉默 发表于 2023-4-3 23:05
第一时间


以后可以第二天上来了

沉默 发表于 2023-4-3 23:15

宁静 发表于 2023-4-3 23:10
以后可以第二天上来了

好睡觉去了

非常开心 发表于 2023-4-4 00:10

欣赏老师的新作{:10_402:}

墨羽 发表于 2023-4-4 11:23

还有隐藏的曼妙身影哦，很好听的歌！

撒哈拉的雨 发表于 2023-4-4 14:52

欣赏宁静佳作{:9_367:}

撒哈拉的雨 发表于 2023-4-4 14:52

一路同行,携手共进
页: [1] 2 3 4
查看完整版本: 携手同行（播放器控制视频）