如何让文本和视频一起流动
Pau*_*aul 7 html javascript css video jquery
我有一个非常具体的问题,我不确定你能用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是否可以做到这一点.我遇到的问题是"clickable"之后的文本跳转到下一行.我希望它不要这样做,因为它扰乱了阅读.我知道这种情况正在发生,因为我拥有视频的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:
段落(p)元素中应该没有div元素.它会导致段落在该点关闭,即使display: none为div设置了该段落.如果使用F12工具检查DOM,可以看到该行为,并在此帖子中查找有关该主题的更多详细信息.
您可以使用跨度替换div以避免换行,display: none在隐藏视频时进行设置,并切换display: block到要显示视频的时间.
当视频可见时,文本中会出现换行符.解决该问题的一种方法是将视频动态地放在行尾.可以通过获取视频后面的一些文本并将其移动到位于视频前面的跨度内来完成.
这些建议在这个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);
}
});
这是你追求的吗？
假设
#clickable是文本(不在OP的代码中).在类中制作,.clickable因为似乎没有任何优势将它作为id.添加了一个中立的类
.frame来span.closed再变span.frame.closed到div.frame.closed并添加display:inline-block到它.更改了jQuery,以便在切换时状态类
.opened和.closed交替均匀div.frame.在和上添加了两种状态的转换.在打开状态下表现正常,但在关闭状态仍然突然,我们将为OP打开该工作.
div.framevideo#videovideo#video添加
float到div.frame.opened所有paragraph 和所有aragraphs并期望文本环绕div.frame.opened.浮动是变幻无常的,更好的选择是flexbox.因为时间没有使用flexbox.
SNIPPET
$(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>