本文目錄一覽:
- 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。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/154870.html