jquery实现视频播放列表自动循环播放效果代码

代码语言:html

所属分类:多媒体

代码描述:jquery实现视频播放列表自动循环播放效果代码

代码标签: jquery 视频 播放 列表 自动 循环

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
#playlist {
}

#playlist li{
    cursor:pointer;
    padding:8px;
}

#playlist li:hover{
    color:blue;                        
}
#videoarea {
    float:left;
    width: 96%;
    margin:10px;    
    border:1px solid silver;
}

body {
  margin: 0;
}
</style>



</head>

<body >
    
   
  <video id="videoarea" controls="controls" autoplay="autoplay" src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4"></video>

<ul id="playlist">
    <li movieurl="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4">视频 1</li>    
    <li movieurl="//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4">视频 2</li>
    <li movieurl="//repo.bfw.wiki/bfwrepo/video/5d87680ae1bf6.mp">视频 3</li>
</ul>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
      <script  >
$(function () {
  var currentlyPlaying = 0;

  $("#playlist li")..........完整代码请登录后点击上方下载按钮下载查看

网友评论0