主页 / 问题 / 1596646
Accepted
Konstantin_SH
Asked:2024-10-14 13:36:20 +0000 UTC2024-10-14 13:36:20 +0000 UTC

在控件中单击播放时如何向视频添加属性？

  • 772

我的页面上elementor有一个视频。还加载以下“自定义代码”：

<script type ="module">
/* jshint  esversion: 8 */
let videos = document.querySelectorAll('.scrolledVideo');
videos.forEach(video => {
    video = video.querySelector('video')
    video.addEventListener('click', () => {
    if (video.getAttribute('data-paused') === "true"){
        video.setAttribute('data-paused', 'false')
        video.muted = false;
    }
    else video.setAttribute('data-paused', 'true') 
    })
    
})

</script>

当您单击视频本身时它会起作用，但当data-paused您单击play中的按钮时不会添加（或更新值，如果有） controls。点击 是controls一个单独的事件吗？在这两种情况下如何添加我的属性？

javascript

1 个回答

  1. Best Answer

    我还没有找到互动的play方式controls。我必须添加div透明颜色并play使用绝对定位将其分层。然后我可以向其添加调用video.play()和属性设置：

    <script type ="module">
/* jshint  esversion: 8 */
let videos = document.querySelectorAll('.scrolledVideo')
videos.forEach(video => {
    let btn = document.createElement('div');
    btn.classList.add('hoveredBtn')
    btn.setAttribute('style', "background-color: #0000000; max-width: 50px; width: 100%; max-height:45px; height:100%; min-height:45px; display:flex; z-index: 1000; position: absolute; top: 89.5%; left:0%;");
    video.appendChild(btn);
    video = video.querySelector('video')
    btn.addEventListener('click', () => {
    if (video.getAttribute('data-paused') === "true"){
        video.setAttribute('data-paused', 'false')
        video.muted = false;
        video.play()
    }
    else if (!video.getAttribute('data-paused') || video.getAttribute('data-paused') === "false"){video.setAttribute('data-paused', 'true')
    video.pause();
    } 
    })
video.addEventListener('click', (e) => {
    
    if (e.target.getAttribute('data-paused') === "true"){
        e.target.setAttribute('data-paused', 'false')
        e.target.muted = false;
    }
    else if (!e.target.getAttribute('data-paused') || e.target.getAttribute('data-paused') === "false") e.target.setAttribute('data-paused', 'true') 
    })
})

</script>
    • 0

相关问题