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

Question

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

<video id="myVideo" src = "./play.mp4" autoplay loop></video>

我正在让它消失在这样的一些动作中：

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

我可以用

让它再次出现

vid.style.visibility = "visible";

但我希望视频能够顺利播放，我该如何通过 javascript 做到这一点？

我试过了：

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

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

我不能使用 opacity :( --> 开发者文档 : 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 为“toggleBtn”：

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

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

Answer 3

似乎为video 标签添加任何颜色的背景使transition 工作。

这是一个Example，你可以看到我只将background:#000添加到css样式表中的视频标签（例如，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 事件来实现。

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';
  }
}

<video id="myVideo" src="./play.mp4" controls autoplay loop></video>

<button id="btn">show/hide</button>