正文
js动画自动播放代码 js设置video自动播放
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js自动播放幻灯片函数
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style
*{ padding:0; margin:0;}
.hy-hdp { display:block; overflow:hidden;}
.hy-hdp .pic{ width:400px; height:320px; position:relative;}
img{ position:absolute; left:0; top:0;width:400px; height:320px;}
li{ list-style:none; width:20px; height:20px; color:#FFFFFF; background:red; line-height:20px; float:left;}
/style
script src=""/script
script
$(document).ready(function(){
/* var $aImg=$("#abc .pic img");
var $aLi=$("#abc .num li");
hy.Init();
hy.m($aImg,$aLi,0);
$aImg.each(function(i,ele){
$(this).click(function(){
$aLi.css("background","red");
$aLi.eq(i).css({
"background" : "green"
});
});
});
$aLi.each(function(index,ele){
$(this).click(function(){
hy.m($aImg,$aLi,index);
});
});*/
$("#abc").hy(2);
$("#bbb").hy(0);
});
(function($,undefined){
$.fn.hy = function(o){
var $obj = $(this);
return new HY($obj,o);
}
var HY = function($obj,o){
var pp = {};
pp.T = null;
pp.ii = 0;
pp.img = $obj.find(".pic img")
pp.li = $obj.find(".num li");
pp.index = o;
m(pp);
pp.li.each(function(index,ele){
$(this).click(function(){
clearTimeout(pp.T);
pp.index = index;
m(pp);
});
});
}
function m(o){
o.li.css("background","red");
o.li.eq(o.index).css("background","green");
o.img.each(function(index,ele){
if(index==o.index){
$(this).css({
"zIndex":2,
"opacity" : 0
});
}else if(index==o.ii){
$(this).css("zIndex",1);
}else{
$(this).css("zIndex",0);
}
});
o.img.eq(o.index).animate(
{
"opacity" : 1
},
1000
);
o.ii = o.index;
o.index = o.index+1;
o.index = o.index=o.li.length?0:o.index;
o.T = setTimeout(function(){
m(o);
},2000);
}
})(jQuery)
/script
/head
body
!--div id="abc" class="hy-hdp" style="float:left; margin:0 10px;"
div class="pic"
img src="images/1.jpg" /
img src="images/2.jpg" /
img src="images/3.jpg" /
img src="images/4.jpg" /
img src="images/5.jpg" /
img src="images/6.jpg" /
/div
ul class="num"
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
/ul
/div--
div id="bbb" class="hy-hdp style="float:left; margin:0 10px;"
div class="pic"
img src="images/1.jpg" /
img src="images/2.jpg" /
img src="images/3.jpg" /
img src="images/4.jpg" /
img src="images/5.jpg" /
img src="images/6.jpg" /
/div
ul class="num"
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
/ul
/div
/body
/html
相关问答
Q1: js动画效果代码方法
1.toggle():
toggle()方法除了模拟鼠标连续单击事件之外，同时会动态的隐藏改变当前元素的高度，宽度和不透明度，最终切换当前元素的可见状态。如果元素可见，则切换隐藏状态，如元素隐藏，切换可见状态
2.fadeln()与fadeOut();
这两个方法，实现了淡入和淡出的一个动画效果，fadeln（）渐显效果，fadeout（）渐隐效果，两者结合使用，可把元素隐藏在按钮中，在通过点击事件显示，两方法只改变元素的透明度，不修改其他属性
3.fadeToggle();
此方法会动态的改变当前元素的透明度，最终却换当前元素的可见状态。如果元素是可见的，则通过淡出效果切换隐藏；如果元素是隐藏的，则通过淡入效果切换可见状态，不设置参数时，默认0.4秒内发生淡入与淡出的动画效果
4.fadeTo() ;
fadeln()与fadeOut()方法都是渐隐渐显，透明度从1到0，从0到1实现一个渐隐渐显效果，而fadeToggle()方法则是可以控制1-0的透明度，为更好展示透明度的效果，可在页面中创造一个下拉框，用于保存透明度值，操作下拉框去控制图片透明度值
5.slideDown(); 与 slideUp() ;
slideDown()可改变元素高度，呈现一个滑动效果，由上往下滑动，直到显示最终的当前元素，slideUp（）相反，由下往上滑动，直到隐藏最终的当前元素
6.slideToggle();
slideToggle()方法跟slideDown(); 与 slideUp() ;两个方法有异曲同工之妙，同样可改变元素的高度，不同于slideDown(); 与 slideUp() ; 的效果， 这个方法是通过点击事情控制元素的隐藏和显示
7.animate() ;
这个方法是自定义动画效果的方法，高度，宽度，透明度，运行速度都是可通过自定义给属性，这个方法只能改变可以取数字值的css属性，如：大小，边框，内外边距，定位，字体，文本，背景，透明度。
8.stop() ;
停止动画，stop（）方法能结束当前的动画，并立即进入到下一个动画。
Q2: js android端实现视频自动播放
在安卓手机上，使用video播放视频有个问题，video控件层级会永远在顶层，不利于视频互动H5开发，而IOS手机上不会有此问题。
video src="" x5-video-player-type="h5"/
x5-video-player-type="h5" 只适用于微信浏览器
注意:
1.jsmpeg 需要将视频转为.ts的文件
先安装ffmpeg,然后执行以下命令,将mp4格式的文件转成 .ts(用命令行转的才能正常播放)
ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts(文件的路径不太好找,建议全局搜索一下)
2.安卓上使用jsmpeg插件渲染canvas，ios上正常使用video并加入隐藏控制条等设置
3. 请使用此js,原作者的js没有回调设置
4. 原作者github地址
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleJSMpegPlayer/title
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"
style
html,body{
padding: 0;
margin: 0;
}
.msg-wrap{
position: fixed;
top: 0;
left: 0;
background: #fff;
border: 1px solid #000;
}
.video-wrap{
width: 100%;
display: none;
}
/style
/head
body
video class="video-wrap" id="video-ios" x5-playsinline webkit-playsinline playsinline src="1_BG_4s_2.mp4"/video
canvas class="video-wrap" id="video-android"/canvas
div class="msg-wrap" id="msgTxt"loading.../div
script src=""/script
script
var msgTxt = document.getElementById('msgTxt');
var video = document.getElementById('video-ios');
var canvas = document.getElementById('video-android');
//检测是否为非安卓浏览器并作处理
var check = !! navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(check){
msgTxt.innerHTML = "not Android mode"
video.style.display="block"
video.play()
//监听video加载完成
video.addEventListener("loadedmetadata",function(){
msgTxt.innerHTML = "not Android mode:videoPlaying"
})
//监听video播放结束
video.addEventListener("ended",function(){
msgTxt.innerHTML = "not Android mode:videoEnd"
})
}else{
// jsmpegPlay(canvas,'1_BG_4s_5.ts',startCallBack,playingCallBack,endCallBack)
jsmpegPlay(canvas,'out.ts',startCallBack,playingCallBack,endCallBack)
}
function jsmpegPlay(Vcanvas,vVideo,startFun,playingFun,endFun) {
var player = new JSMpeg.Player(
vVideo ,{
canvas: Vcanvas,
loop: false,
autoplay: true,
startSign: true,
startCallBack: startFun,
playingCallBack: playingFun,
endCallBack: endFun
});
}
//视频开始播放（即解码完成）执行
function startCallBack() {
msgTxt.innerHTML = "Android mode:videoPlaying"
canvas.style.display="block"
}
//视频播放进度
function playingCallBack(currentTime) {
// console.log(currentTime)
}
//视频播放完成执行
function endCallBack() {
msgTxt.innerHTML = "Android mode:videoEnd"
}
/script
/body
/html
项目中遇到的坑,把使用方法记录一下
在线演示DOMO
JSMpegPlayer
github地址,欢迎小星星~~~
js动画自动播放代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js设置video自动播放、js动画自动播放代码的信息别忘了在本站进行查找喔。
