2015-02-07 2 views
-1

안녕하세요. 저는 온라인 라디오처럼 실시간 스트리밍 할 수있는 사이트를 만들 계획입니다. 예를 들어,이 페이지 https://www.hospitalrecords.com/처럼 전체 사이트를 탐색하더라도 맨 아래의 플레이어가 멈추지 않습니다. 이거 자바 스크립트 야? 또는 Iframe? 정말 Iframe이 익숙하지만,이 자바 스크립트와 함께 할 수 아니다 사전음악 플레이어를 사이트에서 계속 재생하는 방법

아서

답변

0

에 감사합니다. 일반적인 생각은 주 div로 변경되는 본문을 정의하고 탭을 클릭 할 때 해당 div의 내용을 변경하는 것입니다. 좀 더 우아한 방법이 있다고 확신하지만 을 사용할 수 있습니다. lib를 사용하게 될 것입니다. Jquery라는 JS의 경우 익숙한지 잘 모릅니다. 귀하의 페이지가 실제로 하나의 HTML 문서로 구성됩니다 당신이 JQuery와에있는 일반적인 레이아웃 everytab를 들어

<html> 
    <body> 

    <div class="jumbotron"> // This will be div, with a background img 
    <ul class="nav"> // This will be you nav bar 
     <li id="1"> </li> 
     <li id="2> </li> 
    </ul> // For the sake of simplicity I just have 2 tabs 
    </div> 
    <div id="mainbody"> ..bunch of initial html</div> 
    <div class="footer"> </div> this is the music player 
    </body> 
</html> 

(당신이 보낸 예제 페이지)를 찾고있을 것이다 :

$(document).ready(function(){ 
    $("#1").click(function(){ 
      $("#main").html(...."the html of the body you want"...) 
    } 

$("#2").click(function(){ 
     $("#main").html(...."the html of the body you want"...) 
} 
}) 

나는 이후를 당신의 HTML을 추측하는 대신 .html 중에서의() .load 사용할 수있는 복잡한 사용을 얻을 것이다() http://api.jquery.com/html/ http://api.jquery.com/load/

+0

@sinanspd 주석 주셔서 감사합니다. 저는 아직이 자바 스크립트 부분에 익숙하지 않습니다. 좀 더 설명해 주시겠습니까? 고마워. :) – tmv1845331

+0

그래, 나 한테 줘. – sinanspd

+0

대답을 – sinanspd

2
여기에 대해 자세히 알아

당신이 (메모장)

In CSS: 
    .Footer{ 
     background-color:black; 
     height:50px; 
     color: white; 
     position: fixed; 
     width:100%; 
    } 

에 따라 페이지의 바닥 글을 수정하고 HTML5에서 ... 바닥 글에 을 오디오 태그를 추가해야합니다 :
<body> 
    <footer class="Footer"> 
    <!-- here you can add different audio plugin... but I am using html5 audio for example.. --> 
    <audio control auto play loop>// it will loop through the music file 
    <source src ="alam.mp3" type="audio/mpeg"/> 
    <source src ="alam1.mp3" type="audio/mpeg"/> 
    </audio> 
    </footer> 
    </body> 

이 적합 할 것입니다 희망 ..

+0

도움을 주셔서 감사합니다, 나는 반드시이 하나를 시도합니다. – tmv1845331

관련 문제