多个video，如实现自定义按钮分别控制？

Question

问题描述

无法实现多个video使用自定义按钮实现单击按钮播放相应视频，
且其他暂停

问题出现的环境背景及自己尝试过哪些方法

期末考核，尝试过hasClass trigger addClass

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<div class="list">

        <ul>
            <li>
                <video id="videos" class="pause" width="95%" height="" src="img/find/video_1.mp4" >
                    <source src="img/find/video_1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
                    当前浏览器不支持 video直接播放，点击这里下载视频：
                    <a href="myvideo.webm">下载视频</a>
                </video>
                <i id="play_button" class="iconfont" style="color: #fff;font-size: 3rem;">&#xe60e;</i>
                <p>《飞驰人生》赛车大叔不油腻，靠这件事实现人生逆袭</p>
                <div class="video_words">
                    <div class="video_words_left">
                        <img src="img/find/photo_1.png"/>
                        <span>七彩童话</span>
                        <i class="iconfont" style="color: #6e6e6e;font-size: 0.8rem;margin-left: 1.5rem;">&#xe643;</i>
                    </div>
                    <div class="video_words_right">
                        <i class="iconfont" style="color: #787878;font-size: 1rem;">&#xe60c;</i>
                        <span>301</span>
                        <i class="iconfont" style="color: #787878;font-size: 1rem;margin-left: 0.5rem;">&#xe67e;</i>
                        <span>27</span>
                        <i class="iconfont" style="color: #787878;font-size: 1rem;margin-left: 0.5rem;">&#xe64c;</i>
                    </div>
                </div>
            </li>
            <li>
                <video id="videos" class="pause" width="95%" height="" src="img/find/video_2.mp4" >
                    <source src="img/find/video_2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
                    当前浏览器不支持 video直接播放，点击这里下载视频：
                    <a href="myvideo.webm">下载视频</a>
                </video>
                <i id="play_button" class="iconfont" style="color: #fff;font-size: 3rem;">&#xe60e;</i>
                <p>揭秘《海王》幕后拍摄，展现水下拍摄过程</p>
                <div class="video_words">
                    <div class="video_words_left">
                        <img src="img/find/photo_2.png"/>
                        <span>兔儿即</span>
                        <i class="iconfont" style="color: #6e6e6e;font-size: 0.8rem;margin-left: 1.5rem;">&#xe643;</i>
                    </div>
                    <div class="video_words_right">
                        <i class="iconfont" style="color: #787878;font-size: 1rem;">&#xe60c;</i>
                        <span>108</span>
                        <i class="iconfont" style="color: #787878;font-size: 1rem;margin-left: 0.5rem;">&#xe67e;</i>
                        <span>66</span>
                        <i class="iconfont" style="color: #787878;font-size: 1rem;margin-left: 0.5rem;">&#xe64c;</i>
                    </div>
                </div>
            </li>
            <li>
                <video id="videos" class="pause" width="95%" height="" src="img/find/video_3.mp4" >
                    <source src="img/find/video_3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
                    当前浏览器不支持 video直接播放，点击这里下载视频：
                    <a href="myvideo.webm">下载视频</a>
                </video>
                <i id="play_button" class="iconfont" style="color: #fff;font-size: 3rem;">&#xe60e;</i>
                <p>《大人物》包贝尔演技爆棚，富二代公子哥心理变态</p>
                <div class="video_words">
                    <div class="video_words_left">
                        <img src="img/find/photo_1.png"/>
                        <span>草莓胞妹</span>
                        <i class="iconfont" style="color: #6e6e6e;font-size: 0.8rem;margin-left: 1.5rem;">&#xe643;</i>
                    </div>
                    <div class="video_words_right">
                        <i class="iconfont" style="color: #787878;font-size: 1rem;">&#xe60c;</i>
                        <span>427</span>
                        <i class="iconfont" style="color: #787878;font-size: 1rem;margin-left: 0.5rem;">&#xe67e;</i>
                        <span>34</span>
                        <i class="iconfont" style="color: #787878;font-size: 1rem;margin-left: 0.5rem;">&#xe64c;</i>
                    </div>
                </div>
            </li>
            <li>
                <video id="videos" class="pause" width="95%" height="" src="img/find/video_4.mp4" >
                    <source src="img/find/video_4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
                    当前浏览器不支持 video直接播放，点击这里下载视频：
                    <a href="myvideo.webm">下载视频</a>
                </video>
                <i id="play_button" class="iconfont" style="color: #fff;font-size: 3rem;">&#xe60e;</i>
                <p>《人间喜剧》艾伦绑架为钱，富二代这段太逗了</p>
                <div class="video_words">
                    <div class="video_words_left">
                        <img src="img/find/photo_1.png"/>
                        <span>眉眼如故</span>
                        <i class="iconfont" style="color: #6e6e6e;font-size: 0.8rem;margin-left: 1.5rem;">&#xe643;</i>
                    </div>
                    <div class="video_words_right">
                        <i class="iconfont" style="color: #787878;font-size: 1rem;">&#xe60c;</i>
                        <span>281</span>
                        <i class="iconfont" style="color: #787878;font-size: 1rem;margin-left: 0.5rem;">&#xe67e;</i>
                        <span>81</span>
                        <i class="iconfont" style="color: #787878;font-size: 1rem;margin-left: 0.5rem;">&#xe64c;</i>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    var vids = document.getElementsByTagName('video');
    for (var i = 0; i < vids.length; i++) {
        vids[i].onclick = function(){
            if(this.paused){
                this.play();
            $('li>#play_button:eq(i)').css('opacity', '0');
            }else{
                this.pause();
            }
        }
    }
    </script>

你期待的结果是什么？实际看到的错误信息又是什么？

期待结果：使用相应icon按钮播放相应视频，其他暂停，并且播放视频时该视频的按钮和p标签隐藏
没有错误提示信息