本文目录一览:
- 1、jquery实现点击一张图片触发视频播放按钮
- 2、我想用JS做一段网页上图片自动播放的效果,求大神看这段代码哪里有错误啊,在哪里调用呢求解,急!!!!
- 3、JS高手帮我写一个背景音乐播放代码
- 4、js怎样让Safari可以自动播放背景音乐
- 5、求实现按一下一张图片或者一个符号就播放音乐的HTML代码。
- 6、网站能自动循环播放的背景音乐代码是什么?
jquery实现点击一张图片触发视频播放按钮
script type="text/javascript"
//在页面初始化时为图片绑定点击事件
$(function(){
$("#controlpic").click(function(){
//此处写点击触发的操作
$(this).css("display","none");
//1、取得播放器的对象
var objVideo=$("#diveoID");
//2、调用视频播放API
objVideo.play();
//视频停止API
//objVideo.pause();
});
});
/script
我想用JS做一段网页上图片自动播放的效果,求大神看这段代码哪里有错误啊,在哪里调用呢求解,急!!!!
input id="tt" type="button" value="点我开始播放" /
input id="dd" type="button" value="点我停止播放" /
script type="text/javascript"
document.getElementById("tt").onclick=function(){
start();
}
document.getElementById("dd").onclick=function(){
stop();
}
var t ;
var chg = new Array();
chg[0]="images/chgimg1.jpg";
chg[1]="images/chgimg2.jpg";
chg[2]="images/chgimg3.jpg";
chg[3]="images/chgimg4.jpg";
function nextPT() {
alert(123)
var first = 1;
var last = chg.length;
var ppt = document.getElementById("news");
while (first (last+1)){
if (first last) {
first = 1;
} else {
first++;
}
ppt.src = chg[first - 1];
}
}
function start(){
t = setInterval('nextPT()',1000);
}
function stop(){
clearInterval(t)
}
/script
JS高手帮我写一个背景音乐播放代码
第一段:
embed src="等一分钟.mp3" id="aa"
input type=button value=暂停 onclick="aa.pause();"
input type=button value=播放 onclick="aa.play();"
第二段:
audio id="aaa" src="等一分钟.mp3" autoplay controls/audio
input type=button value=暂停 onclick="aaa.pause();"
input type=button value=播放 onclick="aaa.play();"
IE:支持第一段代码,不支持第二段代码
Firefox:支持第二段代码,第一段代码的第一行需要装插件,不支持第一段的后两行
Chrom:支持第二段代码,不支持第一段代码中的后两行
Opera,Safari:第一段代码的第一行需要装插件,不支持第一段的后两行,不支持第二段代码
js怎样让Safari可以自动播放背景音乐
jquery控制背景音乐开关与自动播放提示音的方法。分享给大家供大家参考。具体如下:
很多人初学网页制作时在网页中加入一段背景音乐,听到音乐响起的那一刻往往都会有一丝的成就感。
这里就为大家讲解如何使用js控制背景音乐播放与停止。具体如下:
一、jquery控制背景音乐开关
复制代码 代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http//"
html xmlns="http//" xml:lang="en"
head
script src="js/jquery.min.js"/script
script type="text/javascript"
//加载背景音乐,并自动播放
$('#bg_music').append('embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" /');
$('#bg_music_btn').click(function(){
var state = $('#bg_music_btn').attr('state');
if(state == '1')//
{
$('#bg_music_btn').attr('state','0');
$('#bg_music_btn').html('打开背景音乐');
$('#m_bg_music').remove();
}else if(state == '0')
{
$('#bg_music_btn').attr('state','1');
$('#m_bg_music').remove();
$('#bg_music_btn').html('关闭背景音乐');
$('#bg_music').append('embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" /');
}
});
/script
/head
body
!--控制播放--
div id="bg_music_btn" state='1'关闭背景音乐/div
!--背景音乐--
div id="bg_music"/div
/body
/html
以上介绍了jquery如何控制背景音乐开关的方法,接下来再进一步扩展。
二、JQuery自动播放提示音
最早对网站有自动提示音的功能,发现在Discuz论坛中出现。但是它有一个问题就是只支持flash,不支持HTML5,不明确最新版本中是否支持HTML5。
对于Discuz 7.2 版本中,提供了player.swf、pm_1.mp3、pm_2.mp3、pm_3.mp3,然后使用如下脚本来实现:
复制代码 代码如下:
div id="soundplayerlayer" style="position:absolute;top:-100000px"/div
script type="text/javascript" reload="1"
function soundplayer(file) {
$('soundplayerlayer').innerHTML = AC_FL_RunContent('id', 'pmsoundplayer', 'name', 'pmsoundplayer', 'width', '0′, 'height', '0′, 'src', '{$boardurl}images/sound/player.swf', 'FlashVars', 'sFile={$boardurl}images/sound/pm_' + file + '.mp3′, 'menu', 'false', 'allowScriptAccess', 'sameDomain', 'swLiveConnect', 'true');
}
/script
可惜这个方法局限在flash,在苹果设备上可能就会遇到麻烦了。
HTML5开源播放器JPlayer支持自动播放提示音
JPlayer支持play事件触发自动播放提示音。
1. 装载JPlayer到一个div层,例如#jplayer。
复制代码 代码如下:
$(function() {
$("#jplayer").jPlayer({
swfPath: "http//",
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "./resources/message.mp3"
});
},
supplied: "mp3"
});
});
body部分加入:div id="jplayer"/div
装载JQuery完成后,jplayer的div内容在支持swf的浏览器内变成:
复制代码 代码如下:
div id="jplayer" style="width: 0px; height: 0px;"img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"object height="1" width="1" id="jp_flash_0" data="http//" type="application/x-shockwave-flash" style="width: 0px; height: 0px;"param name="flashvars" value="jQuery=jQueryid=jplayervol=0.8muted=false"param name="allowscriptaccess" value="always"param name="bgcolor" value="#000000"param name="wmode" value="opaque"/object/div
在支持HTML5的浏览器内变成:
复制代码 代码如下:
div id="jplayer" style="width: 0px; height: 0px;"img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"audio id="jp_audio_0" preload="metadata" src="./resources/message.mp3"/audio/div
完成装载后就是触发播放的事件了。
2. 触发播放提示音事件
复制代码 代码如下:
$("#jplayer").jPlayer('play');
3. 循环播放函数,每5秒播放一次提示音
复制代码 代码如下:
function PlaySound() {
$("#jplayer").jPlayer('play');
setInterval("PlaySound()", 5000);
return true;
}
附录:
1. 解决无法自动播放提示音的问题
如果在加载JQplayer后,立刻运行播放的触发事件,没有任何效果!具体是什么原因我也不太清楚,估计是因为音频文件没有加载上。
2. 解决方法是让触发事件等待5秒中执行。
复制代码 代码如下:
setTimeout("$('#jplayer').jPlayer('play')", 5000);
加载完页面,5秒后自动播放提示音。
求实现按一下一张图片或者一个符号就播放音乐的HTML代码。
这个需要写整个网页的 HTML+CSS+脚本 ,没有多少个会为了这个分数来写这个东西的。
我只能给你个提示:
1、自己列好音乐列表,给前面的三角符号添加点击事件执行播放脚本并传递参数(如音乐文件地址)
2、点击以后的处理:
1)、如果有音乐正在播放时,将正在播放的音乐的前面的按钮恢复成三角的。
2)、将所点击的按钮变成暂停符号
3)、播放音乐(可以下载相应的FLASH 播放器来实现播放)
网站能自动循环播放的背景音乐代码是什么?
新建一个music.html页面:
HTML部分:
audio id="bgAudio" controls="controls" autoplay="autoplay" hidden="hidden"
source src="mp3/wangjie.mp3" type="audio/mp3"
source src="mp3/wangjie.ogg" type="audio/ogg"
/audio
js部分:
script type="text/javascript"
myVid=document.getElementById("bgAudio");
myVid.volume=0.2;
/script
再新建一个backMusic.html页面:
HTML部分:
frameset cols="0%,100%"
frame src="music.html"/
frame src="index.html" /
/frameset
扩展资料:
audio 标签定义声音,比如音乐或其他音频流。
实例:
一段简单的 HTML 5 音频:
audio src="someaudio.wav"您的浏览器不支持 audio 标签。/audio
属性:
autoplay:如果出现该属性,则音频在就绪后马上播放。
controls:如果出现该属性,则向用户显示控件,比如播放按钮。
loop:如果出现该属性,则每当音频结束时重新开始播放。
preload:如果出现该属性,则音频在页面加载时进行加载,并预备播放。
src:要播放的音频的 URL。