鼠标悬停时自动播放

Question

OBJECTIVE: 尝试在鼠标悬停在视频本身上时自动播放。

HTML:

<video id = "litVideo" src="lt.mp4" onmouseover="over(this)" onmouseout="out(this)" controls>

JAVASCRIPT:

function over(element) {
    alert("mouseover");
    element.append(autoplay)
   **also tried element.add(autoplay)**
}
    
function out(element) {
    alert("mouseout");
    element.remove(autoplay);  
}

问题：鼠标悬停正在提醒。但是，自动播放不工作。请帮忙

Answer 1

使用 play() 和 pause() 函数

    const video = document.getElementById("video")
    video.onmouseover = function(){
        video.play()
    }
    video.onmouseout = function(){
        video.pause()
    }

<video src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" controls id="video"></video>

但是，如果您想使用您的方法，请使用

element.setAttribute("自动播放")

鼠标悬停时自动播放

Autoplay on MouseOver

html

javascript

onmouseover

onmouseout