网站LOGO
余生
页面加载中
4月18日
网站LOGO 余生
好好生活,保持快乐
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    网站添加视频背景
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    按住ctrl可打开默认菜单

    网站添加视频背景

    余生 · 原创 ·
    网站学习 · 美化
    共 3610 字 · 约 1 分钟 · 216

    通过 HTML5 的 video 标签实现的视频背景页面,按钮使用HTML和CSS实现,点击播放按钮可以播放视频,点击静音按钮可以开启/关闭视频的声音。同时,由于是视频背景的缘故,手机兼容性问题就需要大家自行调整了。另外,由于是视频的缘故,没有套cdn和服务器宽带小的小伙伴就不用瞎折腾了。
    废话不多说,代码送上,代码中视频链接自行修改。

    有静音按键

    将代码直接丢入头部标签中。
    此处内容,需回复之后可见

    无静音按键

    此处内容,需回复之后可见

    效果如下

    原作者

    代码原作者:All in the game

    声明:本文由 余生(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    5

    条评论
    发一条!
    1. · · 北京-北京
      • 等级:Lv.1
      • 角色:好友
      • 分组:生活Blog
      • 在线:三月内
      头像
      板凳

      这个好是好 但是手机端不适配 OωO

      评论
      1. · · 海外
        • 角色:博主
        • 在线:本月
        头像

        所以我没加,我只是开屏动画加了视频。

        评论
        1. · · 北京-北京
          • 等级:Lv.1
          • 角色:好友
          • 分组:生活Blog
          • 在线:三月内
          头像

          开屏动画也不适配手机,安卓没测试,苹果测试了不行 (ó﹏ò。)

          评论
          1. · · 海外
            • 角色:博主
            • 在线:本月
            头像

            因为ios是这样的 答辩一个 他浏览器是默认不兼容自动播放这种的 安卓都是正常的

            评论
    2. · · 海外
      • 等级:Lv.1
      • 角色:访客
      • 在线:三月内
      头像
      沙发

      看看大哥作品

      评论
    博客logo 余生 好好生活,保持快乐 51统计 百度统计
    MOEICP 萌国ICP备20235150号 ICP 黔ICP备2023015485号 ICP 贵公网安备52011102003015号 又拍云 本站由又拍云提供CDN加速/云存储服务

    🕛

    本站已运行 147 天 5 小时 33 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    余生. © 2023 ~ 2024.
    网站logo

    余生 好好生活,保持快乐
     
     
     
     
    壁纸