代码：
<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="utf-8"> <title></title> <meta name="apple-mobile-web-app-title" content="" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" type="image/x-icon" href="img/logo.png" /> <link href="css/index.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.bxslider.js" charset="gbk"></script> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () { var vList = new Array(); // 初始化播放列表 $(".pic_chapter").each(function (index, doc) { vList[index] = $(doc).attr("mp3") }); var vLen = vList.length; var curr = 0; $("#myvideo").attr("src", vList[curr]); $("#myvideo").get(0).addEventListener('ended', function (e) { curr++; if (curr >= vLen) { curr = 0; } slider.goToSlide(curr); //$("#myvideo").attr("src", vList[curr]); }); var slider = $('.slider7').bxSlider({ slideWidth: 500, infiniteLoop: false, hideControlOnEnd: true, slideMargin: 10, auto: false, pagerType: "short", onSlideAfter: function ($slideElement, oldIndex, newIndex) { var mp3 = vList[newIndex]; $("#myvideo").attr("src", mp3); }, }); }); </script> </head> <body style="background-color:#a4c33b;"> <div class="detailcontent"> <div class="historyimg"> <img src="img/b_1.png" /> </div> <div class="historyright"> <p class="historytitle" id="Name">大家都要打哈欠</p> <p class="historytitlep">试读年龄：3-6岁</p> <p class="historytitlep">分类：习惯养成、亲子时光</p> <p class="historytitlep">作者：安妮塔·拜斯特博斯</p> </div> <div class="details"> <div><img class="imgjieshao" src="images/detail/pic01.png"></div> <div class="describeimg"> <div class="slider7"> <div class="slide"><img class="pic_chapter" src="http://cdn-tudo-share.imtudo.com/PicBookChapterInfo/743177cb70b89f392c821b8b8c7bc881.png" mp3="http://cdn-tudo-audios.imtudo.com/PicBookChapterInfo/7e003483fbe5a52877ec94f252654de8.mp3"></div> <div class="slide"><img class="pic_chapter" src="http://cdn-tudo-share.imtudo.com/PicBookChapterInfo/b3def542a53377a7afada831d4f92eed.png" mp3="http://cdn-tudo-audios.imtudo.com/PicBookChapterInfo/d82419c568df5abd6687da19d1bf1f3e.mp3"></div> <div class="slide"><img class="pic_chapter" src="http://cdn-tudo-share.imtudo.com/PicBookChapterInfo/6a8c9ea864800c21b247fd0d89254459.png" mp3="http://cdn-tudo-audios.imtudo.com/PicBookChapterInfo/b87f44b77f65dabc7d9815cf8a5130ff.mp3"></div> </div> </div> </div> </div> <div class="download"> <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.tudou.bmb&g_f=991653"> <img class="logoimg" src="images/detail/share.png" /></a> </div> <video id="myvideo" style="display:none;" autoplay="autoplay"></video> </body> </html>
页面代码我直接copy过来的。有需要的请自己精简一下。bxslider轮播api文档 ：http://www.uedsc.com/jquery-bxslider-api.html
注意：这个网页在IOS系统上面不能播放，IOS有防止浪费用户流量的限制，禁止自动播放。还好微信出了个js脚本。
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script type="text/javascript"> document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('myvideo').play(); }, false); </script>
加上这个代码就可以播放了。参考文章：https://www.cnblogs.com/xiongdahei/p/7144700.html