我想制作嵌入式视频链接的视频预览。
所以基本上在鼠标悬停时它会给出一个缩略图预览。 在mouseout上，它将重置为原始缩略图。
您如何为此嵌入链接编写代码：angular
.module('project.myComponent', [])
.component('myComponent', {
bindings: {
myBinding: '<'
},
template: '<div>{{$ctrl.result}}</div>',
controller: myComponentController
});
function myComponentController($filter, someService) {
var ctrl = this;
ctrl.result = 0;
$ctrl.$onChange = function (changes) {
if(angular.isDefined(changes.myBinding)) {
if(angular.isDefined(changes.myBinding.currentValue)) {
if(angular.isDefined(changes.myBinding.currentValue != changes.myBinding.previousValue)) {
myService.doSomething(changes.myBinding.currentValue).then(
function(data) {
ctrl.result = changes.myBinding.currentValue * 3;
}
);
}
}
}
}
}
或来自其他网站的链接。
答案 0 :(得分：0)
这有很多解决方案。 通常，您将准备好.gif图像，您可以将其用作海报（而不是实际的海报attr）以覆盖视频。然后你会显示它并将它隐藏在mousein和mouseout上，youtube就是这样的。
但你也可以这样做。请参阅此处的完整示例 - ＆gt; https://codepen.io/nikolamitic/pen/GyMrqx
var figure = $(".video").hover( hoverVideo, resetVideo );
function hoverVideo(e) {
$('video', this).get(0).play();
}
function resetVideo(e) {
$('video', this).get(0).load();
}
所以你会在mouseIn上播放视频（这里实际上是悬停）并在mouseout上停止（实际加载）视频。
如果您提供更多详细信息，答案可能更具体针对您的案例。