单击功能后，用声音随机化背景视频

Question

我不久前写了这段代码，它允许用户单击并刷新页面以自动播放随机背景有声视频。

这是他们点击加载函数的函数

    <div align="center"> 
  

  

      <p><font face="verdana" size="2"> 
        <a onclick="ok()"> press me PLAY VIDS :)</a></font></p>
    </div>

https://pastebin.com/PD5qdNDM

<div align="center"> 
  <p><font face="verdana" size="2"> 
    <a onclick="ok()"> -&gt; press me to fix the site :) &lt;-</a></font></p>
</div>
    
    </div>
    </div>
    
</div>


    <!-- Scripts -->
    <script src="js/parallax.js"></script>
    <script>

    // Pretty simple huh?
    var scene = document.getElementById('scene');
    var parallax = new Parallax(scene);

</script>

</script>
<script src="js/custom.js"></script>

<script>

let volumeInterval;

function loaded(){
    
    setInterval(loop, 600);
    volumeInterval = setInterval(volume, 1);
}

function unload(){

    for (var i = 1; i < 99999; i++)
        window.clearInterval(i);
    console.log("unloaded");
}

 function volume() {
            try {
                document.getElementsByTagName("video")[0].volume = 0.15;
                console.log("done!");
                clearInterval(volumeInterval);
            }
            catch (e) {
                console.log("waiting..");
            }
}


function ok() {
    

    document.write(unescape(

这是未转义的代码

https://pastebin.com/YJwbG2mC

<!-- VIDEO GRABBB -->
<video preload="auto" autoplay="true" loop="true">
<source id="player" src="5.mp4">

    <script>
        var video = document.currentScript.parentElement;
        video.volume = 0.33;
        //document.getElementById('player').currentTime = 20; 

    </script>

        <script>
            var video = document.getElementById("player");
            video.addEventListener("timeupdate", function(){
            if(this.currentTime >= 1000) {
            location.reload();
                }
            });
        </script> 

    <script type="text/javascript">
        var video = document.getElementsByTagName('video')[0];

        video.onended = function() {
          location.reload();
        };
    </script>

    <script>
    document.getElementById("player").src = "/" + Math.floor((Math.random()*7)+1) + ".mp4";
    </script>
</video>

无论我怎么调整未转义码，点击功能后都无法让MP4自动播放

这是我无法再访问的实时网站：form.wtf

Answer 1

根据 Source Element 上的 HTML 规范，

Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach.

因此，无论您对 source 元素做什么，都无法更改 video，除非将新的 src 直接应用于 video元素.

替换source元素对播放的video也没有影响。 source 元素的 src 属性可能已更改，但视频将继续播放。

因此，您应该将 source's src 属性留空，直到 JavaScript 代码设置它或

一起省略 source 标签，直接将 src 应用于视频。

Math.floor(Math.random() * 7 + 1); 与 Math.ceil(Math.random() * 7);

完全一样

document.querySelector('#player > source').src = `/${Math.ceil(Math.random() * 7)}.mp4`;

<video id="player" preload="auto" autoplay loop> 
  <source src="">
</video>

单击功能后，用声音随机化背景视频

Randomize Background Video with Sound, after clicking function

html

javascript

video

background

escaping