【问题标题】：How to get text and video to flow together如何让文本和视频一起流动
【发布时间】：2017-04-03 11:32:08
【问题描述】：

我有一个非常具体的问题，我不确定你可以用 css 做我想做的事。对于我在其他帖子上看到的内容，这可能超出了限制，但我想我会问一下，以防有一些 css 天才。我想实现一个非常具体的行为。我有一列文本，该列中的一些单词被突出显示。当您单击单词时，我希望将文本拆分并向上滑动视频。

我的 html 很简单：

<p>text<span id="clickable" class="link">highlighted text</span>.
    <div class="closed">
            <video id="video" width="100%">
                <source src="myVideo.mp4" type="video/mp4">
            </video>
    </div>text</p>

css 包含关闭的类（高度为 0）和打开的具有一定高度的类

css

.closed {
    overflow: hidden;
    height: 0px;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
}

当点击文本并播放视频时，js 应用打开的类，一切都非常简单

JavaScript

$(document).ready(function() {
  $("#clickable").click(function() {
    var vid = document.getElementById("video");
    var closed = $('.closed');
    if(closed.hasClass("open")) {
      closed.removeClass('open');
      vid.pause();
    } else {
      closed.addClass('open');
      vid.play();
    }
  });
});

一切正常。但事情就是这样，我知道我很挑剔，所以我不确定css是否可以做到这一点。我遇到的问题是“可点击”之后的文本跳转到下一行。我希望它不要那样做，因为它会干扰阅读。我知道这种情况正在发生，因为我的视频所在的 div 是一个块元素。但是，如果我更改标签以使其成为跨度（我知道，异端邪说），就像这样：

    <span class="closed">
            <video id="video" width="100%">
                <source src="myVideo.mp4" type="video/mp4">
            </video>
    </span>

视频拒绝关注

overflow: hidden;

规则并且不会隐藏在视线之外，这是我正在尝试做的事情的重点。添加

display: inline-block;

到 div 不会这样做。我已经尝试了一些浮点数，但我在 Chrome 中得到了不稳定的行为。所以我的想法不多了。我希望视频表现得像一个内联元素。有人可以让我摆脱痛苦并告诉我这不能完成，所以我可以继续前进。感谢您的宝贵时间。

----------------------------------- - - - - - - - - -编辑 - - - - - - - - - - - - - - - - -----------------------------

这是我的项目外观的 GIF。这是与“div”选项一起使用的，它就像我想要的那样工作，只是正如我所说的，在视频文本移动到我不想要的下一行之后。

GIF：

【问题讨论】：

为了清楚起见：您是在询问滑下动画最后的突然“下降 1 像素”效果吗？
不，一点也不。我只想让以“The Then and there, I know that I have to sing”开头的句子不在下一行。
所以它应该在一行中显示“Rickie Lee Jones. Then and there,”？
是的。但它不会让我这样做，因为视频在 div 标签内

标签： javascript jquery html css video

【解决方案1】：

段落 (p) 元素内不应有 div 元素。即使为 div 设置了display: none，它也会导致段落在此时关闭。如果您使用 F12 工具检查 DOM，您可以看到该行为，并在 this post 中找到有关该主题的更多详细信息。

您可以将div替换为span以避免换行，隐藏视频时设置display: none，显示视频时切换为display: block。

当视频可见时，文本中会出现换行符。该问题的一种解决方案是将视频动态定位在行尾。可以通过获取视频后面的一些文本并将其移动到位于视频前面的跨度内来完成。

这些建议在this jsfiddle 中实施。您可以更改容器宽度来测试行为。

HTML：

<div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation <span id="clickable" class="link">ullamco</span>
        <span id="spanBefore"></span>
        <span id="spanVideo" class="closed">
            <video id="video" width="100%">
                <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
            </video>
        </span>
        <span id="spanAfter">laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
            qui officia deserunt mollit anim id est laborum.
        </span>
    </p>
</div>

CSS：

#spanVideo
{
    overflow: hidden;
    transition-property: height;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.closed
{
    display: none;
}

.open1
{
    display: block;
    height: 0vw;
}

.open2
{
    height: 65vw;
}

.link
{
    background-color: yellow;
    cursor: pointer;
}

Javascript 代码：

var $spanVideo = $("#spanVideo");

function setVideoPosition() {
    var $spanClickable = $("#clickable");
    var $spanBefore = $("#spanBefore");
    var $spanAfter = $("#spanAfter");

    $spanAfter.text($spanBefore.text() + $spanAfter.text());
    $spanBefore.text("");

    var yBefore = $spanClickable.offset().top;
    var words = $spanAfter.text().split(/(\s)/);

    while ($spanAfter.offset().top <= yBefore && words.length > 0) {
        $spanBefore.text($spanBefore.text() + words.shift());
        $spanAfter.text(words.join(""));
    }
}

$("#clickable").click(function () {
    var video = document.getElementById("video");
    if ($spanVideo.hasClass("closed")) {
        setVideoPosition();
        $spanVideo.toggleClass("closed").toggleClass("open1");
        setTimeout(function () {
            $spanVideo.toggleClass("open2");
            video.play();
        }, 50);
    } else {
        video.pause();
        $spanVideo.toggleClass("open2");
        setTimeout(function () {
            $spanVideo.toggleClass("open1").toggleClass("closed");
        }, 2000);
    }
});

【讨论】：

【解决方案2】：

这就是你所追求的吗？

假设 #clickable 是文本（不在 OP 的代码中）。在 .clickable 的课程中使用它，因为将其作为 id 似乎没有任何优势。
添加了一个中性类 .frame 到 span.closed，然后将 span.frame.closed 更改为 div.frame.closed 并添加了 display:inline-block。
更改了 jQuery，以便在打开 div.frame 时，状态类 .opened 和 .closed 均匀交替。
在div.frame 和video#video 上添加了对两个状态的转换。 video#video 在打开状态下表现正确，但在关闭状态仍然很突然，我们将把该工作留给 OP。
将float 添加到div.frame.opened 和所有paragraphs 并期望文本环绕div.frame.opened。浮动是善变的，更好的选择是 flexbox。由于时间关系，没有使用 flexbox。

片段

$(document).ready(function() {
          $(".clickable").click(function() {
            var vid = document.getElementById("video");
            var frame = $(this).next(".frame");
            if (frame.hasClass("opened")) {
              vid.pause();
              frame.removeClass('opened').addClass('closed');;
              
            } else {
              frame.addClass('opened').removeClass('closed');
              vid.play();
            }
          });
        });

.closed {
  overflow: hidden;
  height: 0px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
.closed #video {
  opacity: .3;
  height: 0px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
.opened {
  height: 190px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  float: left;
  display: inline-block;
}
.opened #video {
  opacity: 1;
  height: 190px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
p {
  float: right;
  margin: 5px 0;
}
.clickable {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="clickable">Attack of opportunity bolster undead class darkness ethereal plane grab infection inflict spell initiative modifier movement modes natural armor bonus paladin plant domain plant type sonic attack spell failure staggered suppress surprise tiny.</p>
<div class="frame closed">
  <video id="video" width="50%" controls="">
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
  </video>
</div>
<p>5-foot step charm subschool class level coup de grace creation subschool critical hit massive damage natural nauseated paladin</p>

【讨论】：

嗨，谢谢，这与我所看到的很接近，但不完全是。您的代码与我尝试过的许多事情之一非常相似。对我来说很重要的一件事是视频打开时的外观。我将使用 gif 编辑我的原始帖子，这将比我在这里更好地理解这一点。请注意，在 gif 中，视频之后的文本与视频之前的文本是分开的，这是我要纠正的。

【解决方案3】：

阅读您的编辑后，我编写了这段代码，可以帮助使用 zer00ne 视频

jquery

$(document).ready(function() {
  $("#text").on('click', function(event) {
    $("#video").slideToggle(400);
  });
});

CSS

  #video {
    width: 25vw;
    height: 25vh;
    display: none;
    position: absolute;
    z-index: 100;
  }

HTML

<p id="text"><a href="#">
  Click me Click meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick meClick me
  </a>
  </p>
    <video id="video" controls="">
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
  </video>


Advice me cousin an spring of needed. Tell use paid law ever yet new. Meant to learn of vexed if style allow he there. Tiled man stand tears ten joy there terms any widen. Procuring continued suspicion its ten. Pursuit brother are had fifteen distant has. Early had add equal china quiet visit. Appear an manner as no limits either praise in. In in written on charmed justice is amiable farther besides. Law insensible middletons unsatiable for apartments boy delightful unreserved. 
</p>

我基本上添加了一个绝对位置，然后使用 jquery 显示视频，希望能有所帮助

你可以在这里看到 https://jsfiddle.net/nbkn6u3d/

【讨论】：