(IOS可自动播放)使用bxslider做了一个切换图片跟随播放MP3的功能
代码:
<!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 = ;
$("#myvideo").attr("src", vList[curr]); $("#myvideo").get().addEventListener('ended', function (e) {
curr++;
if (curr >= vLen) {
curr = ;
}
slider.goToSlide(curr);
//$("#myvideo").attr("src", vList[curr]);
}); var slider = $('.slider7').bxSlider({
slideWidth: ,
infiniteLoop: false,
hideControlOnEnd: true,
slideMargin: ,
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">试读年龄:-6岁</p>
<p class="historytitlep">分类:习惯养成、亲子时光</p>
<p class="historytitlep">作者:安妮塔·拜斯特博斯</p>
</div> <div class="details">
<div><img class="imgjieshao" src="data: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="data: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
(IOS可自动播放)使用bxslider做了一个切换图片跟随播放MP3的功能的更多相关文章
- iOS 本地自动打包工具
1.为什么要自动打包工具? 每修改一个问题,测试都让你打包一个上传fir , 你要clean -> 编译打包 -> 上传fir -> 通知测试.而且打包速度好慢,太浪费时间了.如果有 ...
- iOS 实现后台 播放音乐声音 AVAudioPlayer 以及铃声设置(循环播放震动)
1.步骤一:在Info.plist中,添加"Required background modes"键,value为:App plays audio 或者: 步骤二: - (BOOL) ...
- iOS 关于自动更新的分阶段发布(灰度发布)的相关简介
前言: AppStore 发布应用方式除了自动和手动,如今添加了分阶段发布(灰度发布).目的很明确,降低新版本骤然上升的bug率,不能挽回,只能发布新版本的风险.也也是针对禁止使用热修复,推出的相对 ...
- 【iOS系列】-UIScrollView的介绍及结合UIPageControl实现图片播放的实例
[iOS系列]-UIScrollView的介绍及结合UIPageControl实现图片播放的实例 第一:UIScrollView的常用属性 //表示UIScrollView内容的尺寸,滚动范围 @pr ...
- IOS(苹果手机)使用video播放HLS流,实现在内部播放及全屏播放(即非全屏和全屏播放)。
需求: 实现PC及移动端播放HLS流,并且可以自动播放,在页面内部播放及全屏播放功能. 初步:PC及安卓机使用hls.js实现hls流自动播放及全屏非全屏播放 首先使用了hls.js插件,可以实现在P ...
- 做了一个简易的git 代码自动部署脚本
做了一个简易的git 代码自动部署脚本 http://my.oschina.net/caomenglong/blog/472665 发表于2个月前(2015-06-30 21:08) 阅读(200 ...
- iOS微信自动抢红包插件(支持后台和锁屏下抢红包)
前言:本文主要讲述使用hook方式实现红包插件,涉及到tweak相关知识,如果你不想了解具体实现细节可直接到我的Github地址参考安装(包含越狱和非越狱两种方法) 转眼间2017即将过去,又到了 ...
- JavaScript一个页面中有多个audio标签,其中一个播放结束后自动播放下一个,audio连续播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- IOS无限自动循环滚动banner(源码)
本文转载至 http://blog.csdn.net/iunion/article/details/19080259 目前有很多APP都开始使用一些滚动banner,我自己也做了一个,部分算法没有深 ...
随机推荐
- pandas.read_csv用法(转)
的数据结构DataFrame,几乎可以对数据进行任何你想要的操作. 由于现实世界中数据源的格式非常多,pandas也支持了不同数据格式的导入方法,本文介绍pandas如何从csv文件中导入数据. 从上 ...
- Repeater - 重复器
Repeater - 重复器,用来展示泛型集合中的数据 五大模板:1.HeaderTemplate - 头模板,加载时会在开始执行一次2.FooterTemplate - 脚模板,加载时会在最后执行一 ...
- linux下卸载自带的JDK和安装想要的JDK
卸载 1.卸载用 bin文件安装的JDK方法: 删除/usr/java目录下的所有东西 2.卸载系统自带的jdk版本方法: 查看自带的jdk: #rpm -qa | grep gcj 看到如 ...
- 关于python中的is和==的区别
Python 中的比较:is 与 == 在 Python 中会用到对象之间比较,可以用 ==,也可以用 is .但是它们的区别是什么呢? is 比较的是两个实例对象是不是完全相同,它们是不是同一个 ...
- 04_web基础(五)之cookie与session
29.Http协议无记忆带来的问题 什么是会话:可简单理解为:用户开一个浏览器,访问某一个web站点,在这个站点点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一次会话. 在一 ...
- 手机不弹toast解决方法
经常遇到华为手机不弹toast的问题 华为手机--设置--通知栏和状态栏--通知中心--自己的项目 用户可能允许通知关了 就收不到提示了 在手机的设置 -> (某些手机前面可能 ...
- Java中构造函数传参数在基本数据类型和引用类型之间的区别
Java中构造函数传参数在基本数据类型和引用类型的区别 如果构造函数中穿的参数为基本数据类型,如果在函数中没有返回值,在调用的时候不会发生改变:而如果是引用类型,改变的是存储的位置,所有不管有没有返回 ...
- angular记录
1. <h1>{{title}}</h1> 双花括号语法是 Angular 的插值绑定语法. 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标 ...
- MONGO的简单语法,新手实用
window上启动方式:(简单略) mongod --dbpath E:\study_lib\mongodb\db --port=27000 show dababases; (创建配置文件的启动方式) ...
- java面试:手写代码
二分查找法. /** * 二分查找法:给定一组有序的数组,每次都从一半中查找.直到找到要求的数据. * 主要是得找到下标的表示方法. */ public class BinaryFind { /** ...