視頻時間軸拖動和點擊

我是GSAP的新手，我試圖啓用拖動功能並點擊自定義html5視頻時間軸與GSAP。我看過一對夫婦在GSAP論壇的帖子，但有件事我顯然無法理解......視頻時間軸拖動和點擊

我複製以下的jsfiddle一個簡單的例子：https://jsfiddle.net/epigeyre/oLmk6b0d/2/

所以我創造我拖動元素從一個變量中存儲的元素，綁定到它的容器（這是時間軸容器），然後添加我的函數onDrag（我猜，點擊將是相同的）。時間軸的進度由時間軸容器內的一個div顯示，該容器在X軸上從0縮放到1。我認爲鏈接到當前視頻時間是可以的，但動畫不是（我不明白爲什麼應用翻譯...）。

下面是具體的代碼段：

Draggable.create(timelineProgress, { 
    type:'x', 
    bounds: timeline, // My timeline container 
    onDrag: function() { 
    video.currentTime = this.x/this.maxX * video.duration; 
    TweenLite.set(timelineProgress, { scaleX: this.x/this.maxX }) ; 
    }, 
    onClick: function() { 
    video.currentTime = this.x/this.maxX * video.duration; 
    TweenLite.set(timelineProgress, { scaleX: this.x/this.maxX }) ; 
    } 
});

你能幫我明白這是怎麼回事？非常感謝您的幫助！

來源

2017-06-15 Pipo

這並不完全清楚你想達到什麼。如果刪除導致TimelineProgress的scaleX發生改變的各種行，則可拖動功能可以正常工作。你用ScaleX試圖達到什麼目的？我認爲有一個可拖動的更新屬性可以幫助如果scaleX需要保留。 –

感謝您的回答，我找到了一個使用'trigger'屬性的解決方案。當我有一點時間時，我會在這裏發佈我的代碼！ – Pipo

好吧，這裏爲那些需要建立定製視頻播放器的解決方案。使用GSAP，你在Draggable插件中有一個非常有趣的trigger屬性。

下面是我如何使它適用於HTML5視頻時間線。

var video = document.getElementsByTagName('video')[0], 
 
    play = document.getElementsByClassName('video__play')[0], 
 
    timeline = document.getElementsByClassName('timeline')[0], 
 
    timelineProgress = document.getElementsByClassName('timeline__progress')[0], 
 
    drag = document.getElementsByClassName('timeline__drag')[0]; 
 

 
// Toggle Play/Pause 
 
play.addEventListener('click', togglePlay, false); 
 

 
function togglePlay() { 
 
    if (video.paused) { 
 
    video.play(); 
 
    } else { 
 
    video.pause(); 
 
    } 
 
} 
 

 
// on interaction with video controls 
 
video.onplay = function() { 
 
    TweenMax.ticker.addEventListener('tick', vidUpdate); 
 
}; 
 
video.onpause = function() { 
 
\t TweenMax.ticker.removeEventListener('tick', vidUpdate); 
 
}; 
 
video.onended = function() { 
 
\t TweenMax.ticker.removeEventListener('tick', vidUpdate); 
 
}; 
 

 
// Sync the timeline with the video duration 
 
function vidUpdate() { 
 
    TweenMax.set(timelineProgress, { 
 
    scaleX: (video.currentTime/video.duration).toFixed(5) 
 
    }); 
 
    TweenMax.set(drag, { 
 
    x: (video.currentTime/video.duration * timeline.offsetWidth).toFixed(4) 
 
    }); 
 
} 
 

 
// Make the timeline draggable 
 
Draggable.create(drag, { 
 
    type: 'x', 
 
    trigger: timeline, 
 
    bounds: timeline, 
 
    onPress: function(e) { 
 
    video.currentTime = this.x/this.maxX * video.duration; 
 
    TweenMax.set(this.target, { 
 
     x: this.pointerX - timeline.getBoundingClientRect().left 
 
    }); 
 
    this.update(); 
 
    var progress = this.x/timeline.offsetWidth; 
 
    TweenMax.set(timelineProgress, { 
 
     scaleX: progress 
 
    }); 
 
    }, 
 
    onDrag: function() { 
 
    video.currentTime = this.x/this.maxX * video.duration; 
 
    var progress = this.x/timeline.offsetWidth; 
 
    TweenMax.set(timelineProgress, { 
 
     scaleX: progress 
 
    }); 
 
    }, 
 
    onRelease: function(e) { 
 
    e.preventDefault(); 
 
    } 
 
});

video { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.timeline { 
 
    width: 100%; 
 
    height: 10px; 
 
    background-color: black; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 

 
/* Here is the dragger that I will use to move the video 
 
* current time forward or backward. 
 
* I have added a background color for you to see it 
 
* but just remove it in production. 
 
*/ 
 

 
.timeline__drag { 
 
    width: 1px; 
 
    height: 20px; 
 
    top: -10px; 
 
    background-color: yellow; 
 
    position: absolute; 
 
    z-index: 2; 
 
    transform-origin: 0 0; 
 
} 
 

 
.timeline__progress { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: green; 
 
    transform: scaleX(0); 
 
    transform-origin: 0 0; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.0/utils/Draggable.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.0/TweenMax.min.js"></script> 
 

 
<video> 
 
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"> 
 
</video> 
 
<div class="timeline"> 
 
    <div class="timeline__drag"></div> 
 
    <span class="timeline__progress"></span> 
 
</div> 
 
<button class="video__play">Play/Pause video</button>

我要感謝GSAP論壇的卡爾對他的精彩的幫助！

來源

2017-06-29 17:51:01 Pipo

視頻時間軸拖動和點擊

回答

相關問題