小编Zub*_*ber的帖子

加载时在特定位置启动HTML5视频?

我正在尝试播放HTML5视频(VP8编码).我想要的是在某个位置玩它.让我们说50秒后的时间.

我试过但似乎有一些问题.你能否说一下我做错了什么?

这是代码:

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script> 
Run Code Online (Sandbox Code Playgroud)

我试过但它不起作用.视频加载时,它从刚开始播放.但是,如果我在播放过程中调用它,就像播放视频一段时间后它可以正常工作.有什么我想念的吗?

javascript html5-video

77
推荐指数
5
解决办法
15万
查看次数

在圆滑的轮播幻灯片更改上切换动画 css 类

我正在制作一个滑块slick carousel,我想在幻灯片是 .css 时caption使用animatecss动画active

加载时动画在第一张幻灯片上工作正常,但在那之后,动画在其他幻灯片上不起作用。

这是我的 HTML

<div id="hero-slider">
  <div>
    <img src="http://lorempixel.com/1920/500/abstract/1" alt="">
    <div class="caption">
      <h3>We push the edge of</h3>
      <h2>what’s<br/>possible.123</h2>
    </div>
  </div>
  <div>
    <img src="http://lorempixel.com/1920/500/abstract/2" alt="">
    <div class="caption">
      <h3>We push the edge of</h3>
      <h2>what’s<br/>possible.456</h2>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这里是 SCSS

body {
  padding: 0;
  margin: 0;
}
#hero-slider {
    .caption {
        position: absolute;
        left: 10%;
        top: 10%;

        h2,h3 {
            color: white;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

以及jQuery我正在使用的

$(document).ready(function(){
$('#hero-slider').slick({
  autoplay: true,
  autoplaySpeed: …
Run Code Online (Sandbox Code Playgroud)

javascript jquery animate.css slick.js

5
推荐指数
1
解决办法
4107
查看次数

在Angular 8应用程序中使用外部JavaScript库

我是Angular的新手,我想开发一个漏斗图。我喜欢funnel-graph-js库。我尝试了很多,但没有成功。

这是我的 funnel-graph-directive.ts

import { Directive, ElementRef } from '@angular/core';

// import * as graph from '../../../assets/js/funnel-graph.js';
import * as graph from 'funnel-graph-js/dist/js/funnel-graph.js';
var graph = new FunnelGraph({
  container: '.funnel',
  gradientDirection: 'horizontal',
  data: {
    labels: ['Impressions', 'Add To Cart', 'Buy'],
    subLabels: ['Direct', 'Social Media', 'Ads'],
    colors: [
      ['#FFB178', '#FF78B1', '#FF3C8E'],
      ['#A0BBFF', '#EC77FF'],
      ['#A0F9FF', '#7795FF']
    ],
    values: [
      [3500, 2500, 6500],
      [3300, 1400, 1000],
      [600, 200, 130]
    ]
  },
  displayPercent: true,
  direction: 'horizontal'
});

graph.draw();
@Directive({
  selector: '[appFunnelGraph]'
}) …
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular

5
推荐指数
1
解决办法
153
查看次数

使用CSS网格,第一行2列,之后每列3列

我试图实现一个布局,第一行有2列,此后有3列,就像附加的图像一样。我正在使用css grid

我想实现这种布局

到目前为止,这是我的代码

body {
  background: #161616;
  color: #bdbdbd;
  font-weight: 300;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

h1 {
  font-weight: 300;
}
a {
  color: white;
  text-decoration: none;
  color: #4d4d4d;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.feature__item {
  background-color: #C4C4C4;
  padding: 15px;
  color: #4d4d4d;
}

.feature__item:first-of-type{
  grid-column-start: 1;
  grid-column-end: 3;
}

.feature__item:nth-child(2) {
  
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="feature__item">
    <h5>Heading</h5> …
Run Code Online (Sandbox Code Playgroud)

css css-grid

0
推荐指数
1
解决办法
18
查看次数