点击弹窗播放视频代码

body {

<div class=”hshy_list”>
<ul>
<li><a href=”/video/sp1.mp4″ target=”_blank”>沂蒙精神代代相传</a></li>
<li><a href=”/video/sp2.mp4″ target=”_blank”>家国情怀之“沂蒙红嫂”精神</a></li>
<li><a href=”/video/sp3.mp4″ target=”_blank”>感受沂蒙精神 永远跟着党</a></li>
<li><a ipath=”/video/sp4.mp4″ onclick=”sp(this)”>沂蒙母亲王换于——红色摇篮</a></li>
<li><a ipath=”/video/sp5.mp4″ onclick=”sp(this)” >厉家寨精神是沂蒙精神的重要组成部分</a></li>
</ul>
</div>
</div>
</div>
<div class=”videos”></div>
<style type=”text/css”>
#sp{ cursor: pointer;}
.videos{ display:none; border: 1px solid #080808; position:fixed; left:50%; top:50%; margin-left:-320px; margin-top:-210px; z-index:100; width:640px; height:360px; }
.vclose { position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; }
</style>

<script type=”text/javascript”>
//单个视频
// $(“#sp”).click(function(){ //这个视频被点击后执行
// //var img = $(this).attr(‘vpath’);//获取视频预览图
// var video = $(this).attr(‘ipath’);//获取视频路径
// $(‘.videos’).html(“<video id=\”video\” style=’width: 640px’ src='”+video+”‘ preload=\”auto\” controls=\”controls\” autoplay=\”autoplay\”></video><img onClick=\”close1()\” class=\”vclose\” src=\”\/skin\/images/gb.png\” width=\”25\” height=\”25\”/>”);
// $(‘.videos’).show();
// });

function sp(obj){ //这个视频被点击后执行
//var img = $(this).attr(‘vpath’);//获取视频预览图
var video = $(obj).attr(‘ipath’);//获取视频路径
$(‘.videos’).html(“<video id=\”video\” style=’width: 640px’ src='”+video+”‘ preload=\”auto\” controls=\”controls\” autoplay=\”autoplay\”></video><img onClick=\”close1()\” class=\”vclose\” src=\”\/skin\/images/gb.png\” width=\”25\” height=\”25\”/>”);
$(‘.videos’).show();
}

function close1(){
var v = document.getElementById(‘video’);//获取视频节点
$(‘.videos’).hide();//点击关闭按钮关闭暂停视频
v.pause();
$(‘.videos’).html();
}
</script>}