Question

我的页面中有一个html视频元素：

var vid = document.getElementById("myVideo");
vid.style.visibility = "hidden";

我在这样的一些动作上消失了：

vid.style.visibility = "visible";

我可以用

再次显示它

vid.style.transition   = "visibility 2s";
vid.style.visibility = "visible";

但是我希望视频能够顺利进行，我怎样才能通过javascript实现这一目标？

我试过了：

:email_address

但它没有用。谁能指出我的错误？（webOS平台不支持jquery和site css属性）

我不能使用不透明度:( - ＆gt;开发人员文档：opacity属性在视频元素上不适用。

Answer 1

您可以将css过渡和rgba格式与一些javascript一起使用，以添加不具有css opacity属性的不透明度动画。

var hide = document.getElementById('tryh'),
    show = document.getElementById('trys'),
    foo  = document.getElementById('foo');

show.addEventListener('click', function () {
  foo.className = 'foo show';
});

hide.addEventListener('click', function () {
  foo.className = 'foo hide';
});

.foo {
  position: relative;
  background: rgba(0,0,0,0);
  transition: background-color 1s;
}

.hide {
  background-color: rgba(255,255,255,1);
}

.show {
  background-color: rgba(0,0,0,0);
}

.foo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

<div id='foo' class='foo'>
  <video id="video" src="./play.mp4" controls autoplay loop ></video>
</div>

<button id='trys'>Show</button>
<button id='tryh'>Hide</button>

Answer 2

您可以使用jQuery fadeToggle功能：http://api.jquery.com/fadetoggle/

$('#myVideo').fadeToggle();

例如，如果您有一个隐藏按钮并显示ID为＆to; toggleBtn＆＃39;

的按钮

$('#toggleBtn').on('click', function() {
    $('#myVideo').fadeToggle();
});

jsFiddle：https://jsfiddle.net/98z8wLfL/

Answer 3

似乎在video标记中添加任意颜色的背景会使transition正常工作。

以下是Example您可以看到我只在{css样式表中的视频代码中添加了background:#000（例如，div代码不需要此内容）

CSS：

#myVideo {
  background:#000;
}

JS：

var vid = document.querySelector('#myVideo');
vid.style.transition = "all 0.3s ease-in";

vid.addEventListener('click',function(e) {
  e.target.style.opacity = 0;
})

Answer 4

您的问题是visibility不可动画，也不可转换。

如果你真的需要切换它，可以通过transitionend事件来完成。

＆＃13;

var vid = document.getElementById("myVideo");
vid.style.opacity = "1";

// set it only once or in your css
vid.style.transition = "opacity 2s";

btn.onclick = function() {
    if (this.style.visibility !== 'visible') {
      vid.style.visibility = "visible";
    }
    vid.style.opacity = +!+vid.style.opacity;
  }
  // use the transitionend if you need to
vid.ontransitionend = function() {
  if (this.style.visibility === 'visible') {
    this.style.visibility = 'hidden';
  }
}

＆＃13;

<video id="myVideo" src="./play.mp4" controls autoplay loop></video>

<button id="btn">show/hide</button>

＆＃13;

如何在webOS上创建不透明效果？

4 个答案: