GVKun编程网logo

如何隐藏已在 JS/CSS 中读取的视频？ + 设置一个计时器，使其每小时仅启动一次

3

在本文中，您将会了解到关于如何隐藏已在JS/CSS中读取的视频？+设置一个计时器，使其每小时仅启动一次的新资讯，并给出一些关于)预期css(css-rparentexpected)"用于@media查

在本文中，您将会了解到关于如何隐藏已在 JS/CSS 中读取的视频？ + 设置一个计时器，使其每小时仅启动一次的新资讯，并给出一些关于) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法、、 不起作用、Angular:

    添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css的实用技巧。

    本文目录一览：

    如何隐藏已在 JS/CSS 中读取的视频？ + 设置一个计时器，使其每小时仅启动一次

    如何隐藏已在 JS/CSS 中读取的视频？ + 设置一个计时器，使其每小时仅启动一次

    如何解决如何隐藏已在 JS/CSS 中读取的视频？ + 设置一个计时器，使其每小时仅启动一次

    我正在创建一个网站，在首页打开时，我有一张邀请进入该网站的视频海报，然后点击海报后我的视频（MP4 格式）被阅读。

    我试图做一些 JS/CSS 的东西来在它被阅读后隐藏它，但我必须在这个过程中遗漏一些东西，这就是我寻求帮助的原因。

    我们感兴趣的部分中的实际代码：

    1. function videoEnded() {
    2.   var element = document.getElementByClassName("fullscreen-bg-video");
    3.   element.classList.add("hidevideo");
    4. }
    1. .fullscreen-bg-video.hidevideo {
    2.   display: none;
    3. }
    5. .fullscreen-bg {
    6.   position: fixed;
    7.   top: 0;
    8.   right: 0;
    9.   bottom: 0;
    10.   left: 0;
    11.   overflow: hidden;
    12.   z-index: 9998;
    13. }
    15. .fullscreen-bg-video {
    16.   position: absolute;
    17.   top: -90px;
    18.   left: 0;
    19.   width: 120%;
    20.   height: 120%;
    21. }
    1. <div class="fullscreen-bg">
    2.   <video controls class="fullscreen-bg-video" poster="https://www.ffk-    music.fr/wpcontent/themes/themeffk/img/poster-video-intro.jpg" onended="videoEnded()">
    3.     <source src="https://www.ffk-music.fr/wp-content/themes/themeffk/videos/animffk1920x1080-compressed.mp4" type="video/mp4">
    4.   </video>
    5. </div>

我可能遗漏了 JS 部分的一些内容，即使经过一些研究，我也没有找到任何合适的解决方案。

此外，对于同一个视频，我希望它每小时只显示一次，如果访问者已经访问了主页，我可以按此顺序添加一些内容以及我应该寻找什么才能找到答案到这个？

非常感谢

解决方法

getElementByClassName 不存在，您可能需要 getElementsByClassName。然后你必须访问一个数组元素。

  1. function videoEnded() {
  2.   var element = document.getElementsByClassName("fullscreen-bg-video");
  3.   element[0].classList.add("hidevideo");
  4. }
  1. .fullscreen-bg-video.hidevideo {
  2.   display: none;
  3. }
  5. .fullscreen-bg {
  6.   position: fixed;
  7.   top: 0;
  8.   right: 0;
  9.   bottom: 0;
  10.   left: 0;
  11.   overflow: hidden;
  12.   z-index: 9998;
  13. }
  15. .fullscreen-bg-video {
  16.   position: absolute;
  17.   top: -90px;
  18.   left: 0;
  19.   width: 120%;
  20.   height: 120%;
  21. }
  1. <div class="fullscreen-bg">
  2.   <video controls class="fullscreen-bg-video" poster="https://www.ffk-    music.fr/wpcontent/themes/themeffk/img/poster-video-intro.jpg" onended="videoEnded()">
  3.     <source src="https://www.ffk-music.fr/wp-content/themes/themeffk/videos/animffk1920x1080-compressed.mp4" type="video/mp4">
  4.   </video>
  5. </div>

,
  • getElementsByClassName 返回类似数据结构的数组，因此您需要使用数组索引从中获取元素。
  • 它应该是 getElementsByClassName 而不是 getElementByClassName。差异是 s。

  1. function videoEnded() {
  2.   var element = document.getElementsByClassName("fullscreen-bg-video");
  3.   console.log(element)
  4.   element[0].classList.add("hidevideo");
  5. }
  1. .fullscreen-bg-video.hidevideo {
  2.   display: none;
  3. }
  5. .fullscreen-bg {
  6.   position: fixed;
  7.   top: 0;
  8.   right: 0;
  9.   bottom: 0;
  10.   left: 0;
  11.   overflow: hidden;
  12.   z-index: 9998;
  13. }
  15. .fullscreen-bg-video {
  16.   position: absolute;
  17.   top: -90px;
  18.   left: 0;
  19.   width: 120%;
  20.   height: 120%;
  21. }
  1. <div class="fullscreen-bg">
  2.   <video controls class="fullscreen-bg-video" poster="https://www.ffk-    music.fr/wpcontent/themes/themeffk/img/poster-video-intro.jpg" onended="videoEnded()">
  3.         <source src="https://www.ffk-music.fr/wp-content/themes/themeffk/videos/animffk1920x1080-compressed.mp4" type="video/mp4">
  4.       </video>
  5. </div>

) 预期 css(css-rparentexpected)

) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法

Visual Studio Code does not support 4 级范围语法呢。此外，MDN 表示目前只有 Firefox 支持该语法。如果您需要跨浏览器支持，您现在需要坚持使用原始的 max-width 语法：

@media (max-width: 768px) {
    h1 {
        font-size: 3em;
        color: mediumvioletred;
    }
    nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: mediumaquamarine;
    }
}

否则，你所拥有的是正确的。

" alt="">

OSC 请你来轰趴啦！1028 苏州源创会，一起寻宝 AI 时代

css 样式   引入  href="css/layout.css?id=7" 是什么意思？

不起作用" alt=" 不起作用">

如何解决<link rel="stylesheet" type="text/css" href="{% static ''css/style.css'' %}"> 不起作用

我在 vs-code 上将 css 链接到 html。 center-aliend 在这里不起作用。有没有人知道哪个部分有问题？ 我想设置文本“Hello Static!!”到浏览器的中心。

  1. {% load static %}
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <Meta charset="UTF-8">
  7.     
  8.     <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  9.     <link rel="stylesheet" type="text/css" href="{% static ''css/style.css'' %}">
  10.     <title>Static Practice</title>
  11. </head>
  12. <body>
  13.     <div>Hello Static!!</div>
  14. </body>
  15. </html>

  1. body {
  2.     text-align: center;
  3. }

  3. # Static files (CSS,JavaScript,Images)
  4. # https://docs.djangoproject.com/en/3.1/howto/static-files/
  6. STATIC_URL = ''/static/''
  8. STATICFILES_Dirs = [
  9.     BASE_DIR / ''static''
  10. ]

Angular: <ol> 添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css

Angular:
    添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css

如何解决Angular: <ol> 添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css

我正在 angular 中创建富文本编辑器，当我执行 document.execCommand(''insertOrderedList'') 时，我得到 <ol> 项，它不受我组件的 css 的影响，只有 styles.css 中的 css（主 css 文件在项目的根目录）影响我使用 document.execCommand 添加的项目。 是否有可能改变这种行为？

解决方法

当然。它的名字是view encapsulation。将其更改为 ViewEncapsulation.none 会产生所需的行为。

  1. @Component({
  2.   ...
  3.   encapsulation: ViewEncapsulation.none
  4. })

我们今天的关于如何隐藏已在 JS/CSS 中读取的视频？ + 设置一个计时器，使其每小时仅启动一次的分享就到这里，谢谢您的阅读，如果想了解更多关于) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法、、 不起作用、Angular:

    添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css的相关信息，可以在本站进行搜索。

    本文标签：

上一篇将 css 类传递给 Ransack 的 sort_link（css传参）

下一篇使用特定图像 URL 应用 CSS 规则（设置图像的url的属性是）

相关文章