在HTML5和Javascript中循环反转视频

Question

我目前有一个嵌入式视频，它在鼠标悬停时循环播放并在鼠标输出时暂停。我最终希望它能让视频在正常方向上循环，在鼠标悬停在右侧时，暂停鼠标移出，并在左侧悬停时反向循环。

这是我目前的代码：

<video id="360-rotation" src="Earth Rotation.mp4" width="640" height="640" loop></video>

<script type="text/javascript">

document.addEventListener('mouseover', hoverVideo);
var video = document.getElementById('360-rotation');

function hoverVideo(event) {
    if (event.target == video) {
        video.play();
        this.addEventListener('mouseout', stopHoverVideo);
    }
}

function stopHoverVideo(event) {
    if (event.target == video) {
        video.pause();
        //video.playbackRate = -1;
    }
}

我做了一些研究，似乎循环不支持playbackRate的负值。有没有其他方法可以实现这个目标？