如何在 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属性）

I cannot use opacity :( --> Developer documentation : The opacity property is unapplicable on video elements.

Answer 1

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

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

例如，如果您有一个用于隐藏和显示的按钮，其 id 为 'toggleBtn':

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

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

Answer 2

似乎向 video 标签添加任何颜色的背景都能使 transition 起作用。

这是一个 Example 你可以看到我只添加了 background:#000 到 css 样式表中的视频标签（例如 [=15 不需要这样做） =] 标签).

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 3

您可以使用 css 过渡和 rgba 格式以及一些 javascript 添加不透明动画而不 css 不透明度属性。

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 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>

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

How to create opacity effect on webOS?

html

javascript

css

webos