video标签中poster属性的使用

 <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<video width="320" height="240" poster="http://img.youguoquan.com/uploads/users/header/f99a9c581c52b5e2245d7e5feb08e2ba.jpg" controls>
   <source src="http://img.youguoquan.com/uploads/crowd/videos/2017/07/28/8a5852432f0d496964240b1f41aa3ab9.MP4" type="video/mp4">
</video>
</body>
</html>

 需求:如上的代码,在手机端,视频播放退出后,视频的底图应该仍然是播放前的视频底图(即poster属性加上的预览图),而不是视频播放后的最后一帧的图像

添加ended事件重置下src就行了

 <video width="320" height="240" poster="http://img.youguoquan.com/uploads/users/header/f99a9c581c52b5e2245d7e5feb08e2ba.jpg" controls>
    <source src="http://img.youguoquan.com/uploads/crowd/videos/2017/07/28/8a5852432f0d496964240b1f41aa3ab9.MP4" type="video/mp4">
</video>
<script>
    var v = document.getElementsByTagName('video')[0];
    v.addEventListener('ended', function () {
        this.src = "http://img.youguoquan.com/uploads/crowd/videos/2017/07/28/8a5852432f0d496964240b1f41aa3ab9.MP4"
    }, false);
</script>