Question

我想制作嵌入式视频链接的视频预览。

所以基本上在鼠标悬停时它会给出一个缩略图预览。在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; } ); } } } } }或来自其他网站的链接。

Answer 1

这有很多解决方案。通常，您将准备好.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上停止（实际加载）视频。

如果您提供更多详细信息，答案可能更具体针对您的案例。

如何为嵌入式视频链接编写视频预览代码？

1 个答案: