欢颜（云裳） 发表于 2025-2-12 22:15

【云裳音画】我的世界风和日丽

<style>
#mydiv { margin: 0 0 0 calc(50% - 1000px);
display: grid;
place-items: center;
width:1822px;
height:869px;
top:130px;
background: lightblue url('https://pic1.imgdb.cn/item/67acaa89d0e0a243d4fea804.jpg')no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 3;}
#vid1 {
      position: absolute;
      width: 100%;
      height: 100%;
      top:10px;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index:2;
      opacity: .10;
}
#vid2 {
      position: absolute;
      width: 100%;
      height: 100%;
                right:8%;
      top:10px;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 5;
      opacity: .39;
}   
</style>   
<div id="mydiv">
<p style="width:150%;margin: auto;position:relative;">
<video id="sp" src="https://img.tukuppt.com/video_show/2475824/00/01/68/5b48425912ddd.mp4" width="150%" autoplay="" preload="auto" loop="" style="position:absolute;mix-blend-mode:screen;left:0;top:0;z-index:1;"></video>
<p style="width:150%;margin: auto;position:relative;">
<video id="sp" src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" width="150%" autoplay="" preload="auto" loop="" style="position:absolute;mix-blend-mode:screen;left:0;top:0;z-index:1;"></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=303364" autoplay="" loop=""></audio>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

爆汁莓驴 发表于 2025-2-12 22:41

怎么不试试视频特效？
我看你加个视频特效。但这样不会显示，你在元宵节也试过，不过比例不对。你可以套用元宵节的方法，把视频和你制作图片宽度百分比都设成150%，200%也行，但要一样大。
你很会动脑子，想把作品作为视频的背景图片。但这个透明技术不是这个理:lol，我也试过，结果是一片黑色;P
视频和作品必须分开，宽高一致。

爆汁莓驴 发表于 2025-2-12 23:06

100%的效果
    <style>
      .embed-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-top: 65%; /* For a 16:9 aspect ratio */
            overflow: hidden;
      }
      .embed-container iframe,
      .embed-container object,
      .embed-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
      }
    </style>
    <div class="embed-container">
      <iframe id="frm" src="http://pan.yinhuabbs.cn/uploads/bzml/%E5%93%88%E5%93%88.html?url=303364&sf=https://img.tukuppt.com/video_show/2269348/00/14/17/5e1caa11c20fb.mp4&img=https://pic.imgdb.cn/item/6767b2c4d0e0a243d4e7f9ff.jpg&autoplay=1" frameborder="0" allowfullscreen></iframe>
    </div>



这个视频特效高度大，都把我下面帖子的操作选择都覆盖了，加了5个换行符才可以。像这样的图片比例大些反而适合视频特效。<br>
你只要按元宵节的修改方法用，把视频的宽度也调整到200%不到就可以。
我不习惯大满贯的效果，所以也不会。大满贯不如全屏观看，如果千里江山图也大满贯，估计浏览器都不答应。全屏一样可以完整看。<br>
重新完善了，可以加音乐并控制，点击画面全屏退出全屏。<br>
也可以大满贯，如轻音贴，视频动效加在作品上，就是整个连接（含参数）放到大满贯代码里。<br>
这个利用视频做动效最后的难点是4个圆角，一般样式后圆角阴影都有，但透明后视频的角圆不了，很难看，溢出隐藏不了，缩小视频但画面看得出。也解决了

<script>
document.getElementsByTagName('audio').pause();
</script>

爆汁莓驴 发表于 2025-2-13 10:18

增加了一个微调参数。视频的大小主要是高度可能与图片不一致，如果小在图片上会形成透明度明显的差异不利于作品的美观，所以视频样式的缩放可以调节，如果缺项默认1.1（视频本身就小一点），参数取名zoom的首尾字母zm需要调节时加在最后。1是本身大小，缩放具体看情况调。我是在试岚儿作品发现问题的，下面有一段很明显的透明度不一，我后来增大到1.23才合适。<br>
暂停上面音乐再打开下面的
    <style>
      .embed-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-top: 65%; /* For a 16:9 aspect ratio */
            overflow: hidden;
      }
      .embed-container iframe,
      .embed-container object,
      .embed-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
      }
    </style>
    <div class="embed-container">
      <iframe id="frm2" src="http://pan.yinhuabbs.cn/uploads/bzml/%E5%93%88%E5%93%88.html?url=3951227&sf=https://video.699pic.com/videos/99/00/58/a_66c2002a09b0517239900580412.mp4&img=http://pan.yinhuabbs.cn/uploads/%E5%B2%9A%E5%84%BF/%E4%B8%80%E8%B7%AF%E7%B9%81%E8%8A%B13.jpg&autoplay=0" frameborder="0" allowfullscreen></iframe>
    </div><br>
<p align="center"><input type="button" value="调" onclick="if(this.value=='调'){frm2.src='http://pan.yinhuabbs.cn/uploads/bzml/%E5%93%88%E5%93%88.html?url=3951227&sf=https://video.699pic.com/videos/99/00/58/a_66c2002a09b0517239900580412.mp4&img=http://pan.yinhuabbs.cn/uploads/%E5%B2%9A%E5%84%BF/%E4%B8%80%E8%B7%AF%E7%B9%81%E8%8A%B13.jpg&autoplay=0&zm=1.23';this.value='前';return false}else{frm2.src='http://pan.yinhuabbs.cn/uploads/bzml/%E5%93%88%E5%93%88.html?url=3951227&sf=https://video.699pic.com/videos/99/00/58/a_66c2002a09b0517239900580412.mp4&img=http://pan.yinhuabbs.cn/uploads/%E5%B2%9A%E5%84%BF/%E4%B8%80%E8%B7%AF%E7%B9%81%E8%8A%B13.jpg&autoplay=0';this.value='调';return false}"></p>

爆汁莓驴 发表于 2025-2-13 10:41

代码见欢颜“元宵节"贴。

欢颜（云裳） 发表于 2025-2-13 21:19

爆汁莓驴 发表于 2025-2-12 22:41
怎么不试试视频特效？
我看你加个视频特效。但这样不会显示，你在元宵节也试过，不过比例不对。你可以套用 ...

这是单图，不是特效音画，是有区别的，呵呵

欢颜（云裳） 发表于 2025-2-13 21:29

爆汁莓驴 发表于 2025-2-12 22:41
怎么不试试视频特效？
我看你加个视频特效。但这样不会显示，你在元宵节也试过，不过比例不对。你可以套用 ...

可以用，但图图不在正中，太偏 右了

爆汁莓驴 发表于 2025-2-13 21:42

欢颜（云裳） 发表于 2025-2-13 21:29
可以用，但图图不在正中，太偏 右了
可以适合大满贯的效果;P不加音乐就是单图加视频特效，用音乐多个控制音乐小按钮，点击画面全屏或退出全屏。
大满贯与否，都一样的效果。这个也没用音乐，单图加视频特效

代码里的参数可以自由组合，
图片+视频 就是你想的单图效果，然后你再单独配不可控音乐
图片+视频+音乐，多个可控音乐小按钮
都可以全屏，是否大满贯贴可以自由操作。（具体我没试过）
轻音贴是大满贯效果，上面连接是没有大满贯。

爆汁莓驴 发表于 2025-2-13 22:41

我又仔细看了你的代码，和元宵节后来你调整后的情况是相同的，作品没有作为视频的背景。
这个透明原理，视频和图片要分开方可实现透明效果。元宵节的贴，把作品放在视频下方，由于宽度比例不同所以显示不友好，后来你调整一样，效果出来了！这个贴作品作为div背景，不是视频的背景，实质图片也是在视频下方，和元宵节贴情况一样，视频和作品是分开的，所以可以透明。
问题，你调整作品的位置后，宽度比例又不一致了，犯了元宵节同样的错误，不一致:lol
解决办法：把视频宽度和上面的p宽度都设置成背景图片的宽度1822px





我觉得你们辛辛苦苦制作的作品由于不爱兼顾手机的显示效果，所以是辛苦一场。
音画论坛没有以前热闹，原因是网络更新太快，就像我在论坛首贴希望的那样，每个人都要与时俱进！！！

现在做生意，不注重线上发展，肯定壮大不了

网络平台不适应手机必定淘汰
将来不找个机器人做朋友幸福不了;P



约会阳光 发表于 2025-2-13 22:58

谢谢欢颜（云裳）朋友精彩分享
谢谢汁莓老师经典分析、讲解
页: [1] 2
查看完整版本: 【云裳音画】我的世界风和日丽