JavaScript自动切换并播放视频 | Tampermonkey

背景：接上篇文章。昨天的脚本已经实现了自动在视频播放过程中点击突然出现的按钮使之继续播放，但是这还存在很多问题。

每次视频播放完需要自己切换到下一个视频
每次视频都需要手动在控制台中输入代码

如何获取需要播放的视频？

观察源代码。

<li class="">
    <a style="width:70%;color:red"
    href="/fzdx/play?v_id=1119&r_id=4103&r=video&pg=">一、历史渊源和现实基础</a>
    <span>00:27:33</span>
</li>
<li class="video_red1">
    <a style="width:70%;"
    href="/fzdx/play?v_id=1119&r_id=4104&r=video&pg=">二、显著特点和要求（一）</a>
    <span>00:39:44</span>
</li>
<li class="">
    <a style="width:70%;"
    href="/fzdx/play?v_id=1119&r_id=4105&r=video&pg=">三、显著特点和要求（二）</a>
    <span>00:16:58</span>
</li>
<li class="">
    <a style="width:70%;"
    href="/fzdx/play?v_id=1119&r_id=4106&r=video&pg=">四、思想根基和比较优势</a>
    <span>00:23:51</span>
</li>

可以看到，每个视频的url都被存在了a标签中，我们点击a标签就可以跳转到对应的视频页面。

值得注意的是，已经看完了的视频的a标签会被设置为红色，如下图。

在这里插入图片描述

我们仔细观察源代码也可以发现，第一个视频的a标签有着的color:red的样式。所以我们的目标a标签就是那些样式中color为空的a。

还有一个小细节，该页面上还有一些a标签，它们对应的不是视频列表中的视频。比如

 <a href="#" class="video_bottom_tlq">课程讨论区</a>
 <a href="javascript:void(0);" class="note_save">保存</a>

我们发现这些a标签和视频列表中的a有一个明显区别，这些a标签都有class名。所以我们可以根据这一点来进行区分。

根据以上信息我们可以写出以下代码。

    var target_a;   //找到第一个还没有看的视频【a不是红色的】
    var as = document.getElementsByTagName("a");
    for (i = 0; i < as.length; i++)
    {
        if (as[i].className == "" && as[i].style.color == "")
        {
            target_a = as[i];
            break;
        }
    }

得到的target_a就是视频列表中还没看的视频里的第一个视频。

什么时候对target_a进行点击呢？

我们已经得到了target_a。但是还需要思考什么时候进行点击。

当前的视频还在播放，我们就直接点击下一个，这样肯定不行，所以我们利用<video>的标签的进度条是否已经到最后来判断视频是否播放完。如果播放完，那就点击target_a。如果没有播放完，就执行点击确定框的代码（视频会时不时冒出一个框让你点击，并自动暂停，点击后才能继续播放。这段代码在我昨天的文章中已经写出）。

代码如下。

    var video = document.getElementById("video");   
    if (video.currentTime == video.duration && target_a)    //如果视频已经播放完，并且有剩余视频，则点击下一个视频进行观看
    {
        target_a.click();
    }
    else if (video.currentTime < video.duration)    //在视频没有播放完的情况下若弹出框，进行点击。
    {
        var btn = document.querySelector('.public_submit'); 
        if(btn)
            btn.click();
    }

遇到的问题1：每个视频开头点击确定开始后报错

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

原因是浏览器为了限制恶意自动播放视频的js脚本，对脚本进行了限制。解决办法是先将视频静音，之后就能利用js自动播放了。

改进代码如下

    var video = document.getElementById("video");   
    if (video.currentTime == video.duration && target_a)    //如果视频已经播放完，并且有剩余视频，则点击下一个视频进行观看
    {
        target_a.click();
    }
    else if (video.currentTime < video.duration)    //在视频没有播放完的情况下若弹出框，进行点击。
    {
        if (video.paused)
        {
            video.muted = true;	//设置为静音
            video.play(1);  //播放
        }
        var btn = document.querySelector('.public_submit'); 
        if(btn)
            btn.click();
    }

遇到问题2：每次切换视频即切换页面后控制台的代码被重置

因为每次点击视频链接后，相当于打开了一个新的网页，这时候控制台的代码就无了。查询过后发现油猴脚本[Tampermonkey]可以实现在页面加载后自动执行用户自定义的js脚本。

成功实现自动切换视频并播放的操作。

最终代码

setInterval(function(){
    var target_a;   //找到第一个还没有看的视频【a不是红色的】
    var as = document.getElementsByTagName("a");
    for (i = 0; i < as.length; i++)
    {
        if (as[i].className == "" && as[i].style.color == "")
        {
            target_a = as[i];
            break;
        }
    }

    var video = document.getElementById("video");   
    if (video.currentTime == video.duration && target_a)    //如果视频已经播放完，并且有剩余视频，则点击下一个视频进行观看
    {
        target_a.click();
    }
    else if (video.currentTime < video.duration)    //在视频没有播放完的情况下若弹出框，进行点击。
    {
        if (video.paused)
        {
            video.muted = true;
            video.play(1);
        }
        var btn = document.querySelector('.public_submit'); 
        if(btn)
            btn.click();
    }
}, 1000)