Переключение по табу после окончания видео
 

Ребят помогите сделать переключение ТАБА после окончания видео - автоматически.имеется 2 таба в первом находится видео которое включается автоматически во втором галерея. Вот код:

<div class="notebook2">
        <input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
        <input type="radio" name="notebook2a" id="notebook2a_2">
            <label name="button2" class="button2" onclick="closeModal()">
                <img src="full/iconX.png" onclick="document.getElementById('videoplay').pause()">
            </label>
        <div id="video" onclick="document.getElementById('videoplay').play()">
            <label for="notebook2a_1" style="margin-top:7px;">Video</label>
            <video class="videocontent" id="videoplay" src="full/ps.mp4" poster="full/poster.png" controls preload ></video>
        </div>
    <div id="slides" onclick="document.getElementById('videoplay').pause()">
        <label for="notebook2a_2" style="margin-top:6px;">Gallery</label>
            <div class="container">
                <ul id="slides">
                    <li class="slide showing"><img src="full/1.png"></li>
                    <li class="slide"><img src="full/2.png"></li>
                    <li class="slide"><img src="full/3.png"></li>
                    <li class="slide"><img src="full/4.png"></li>
                </ul>
                <div class="controls" id="previous">
                    <img src="full/left_arrow.png"/>
                </div>
                <div class="controls" id="next" style="left:50px;float:right">
                    <img src="full/right_arrow.png"/>
                </div>
            </div>
                <ul class="thumbs">
                    <li class="img1"><img src="Thumbs/1.png" class="mini active" data-full-url="full/1.png"
                                          onmouseover="this.src='thumbs/1_over.png'"
                                          onmouseout="this.src='thumbs/1.png'"/></li>
                    <li class="img2"><img src="Thumbs/2.png" class="mini"  data-full-url="full/2.png"
                                          onmouseover="this.src='thumbs/2_over.png'"
                                          onmouseout="this.src='thumbs/2.png'"/></li>
                    <li class="img3"><img src="Thumbs/3.png" class="mini"  data-full-url="full/3.png"
                                          onmouseover="this.src='thumbs/3_over.png'"
                                          onmouseout="this.src='thumbs/3.png'"/></li>
                    <li class="img4"><img src="Thumbs/4.png" class="mini" data-full-url="full/4.png"
                                          onmouseover="this.src='thumbs/4_over.png'"
                                          onmouseout="this.src='thumbs/4.png'"/></li>
                </ul>
        </div>

никто не знает ?

событие какое то нужно. Без него не получится.

У видео есть событие ended
https://metanit.com/web/html5/7.3.php

тогда как то так

<div class="notebook2">
        <input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
        <input type="radio" name="notebook2a" id="notebook2a_2">
            <label name="button2" class="button2" onclick="closeModal()">
                <img src="full/iconX.png" onclick="document.getElementById('videoplay').pause()">
            </label>
        <div id="video" onclick="document.getElementById('videoplay').play()">
            <label for="notebook2a_1" style="margin-top:7px;">Video</label>
            <video class="videocontent" id="videoplay" src="full/ps.mp4" poster="full/poster.png" controls preload ></video>
        </div>
    <div id="slides" onclick="document.getElementById('videoplay').pause()">
        <label for="notebook2a_2" style="margin-top:6px;">Gallery</label>
            <div class="container">
                <ul id="slides">
                    <li class="slide showing"><img src="full/1.png"></li>
                    <li class="slide"><img src="full/2.png"></li>
                    <li class="slide"><img src="full/3.png"></li>
                    <li class="slide"><img src="full/4.png"></li>
                </ul>
                <div class="controls" id="previous">
                    <img src="full/left_arrow.png"/>
                </div>
                <div class="controls" id="next" style="left:50px;float:right">
                    <img src="full/right_arrow.png"/>
                </div>
            </div>
                <ul class="thumbs">
                    <li class="img1"><img src="Thumbs/1.png" class="mini active" data-full-url="full/1.png"
                                          onmouseover="this.src='thumbs/1_over.png'"
                                          onmouseout="this.src='thumbs/1.png'"/></li>
                    <li class="img2"><img src="Thumbs/2.png" class="mini"  data-full-url="full/2.png"
                                          onmouseover="this.src='thumbs/2_over.png'"
                                          onmouseout="this.src='thumbs/2.png'"/></li>
                    <li class="img3"><img src="Thumbs/3.png" class="mini"  data-full-url="full/3.png"
                                          onmouseover="this.src='thumbs/3_over.png'"
                                          onmouseout="this.src='thumbs/3.png'"/></li>
                    <li class="img4"><img src="Thumbs/4.png" class="mini" data-full-url="full/4.png"
                                          onmouseover="this.src='thumbs/4_over.png'"
                                          onmouseout="this.src='thumbs/4.png'"/></li>
                </ul>
        </div>

	<script>
document.querySelector('#videoplay').addEventListener('ended', function () { 
    document.querySelector('#notebook2a_2').checked = true;
}, false);
	</script>