mp3,동영상 자막 연동 / synchronize and highlight HTML text to audio > HTML5 관련 정보

본문 바로가기

검색취소

mp3,동영상 자막 연동 / synchronize and highlight HTML text to audio

검색 이전 다음 목록

본문


2
down voteaccepted

For ease of use, I recommend a combination of jQuery and Popcorn.js for anything where you want to integrate media with HTML, and visa versa. See this jsfiddle post for an example.

For the record, should jsfiddle ever disappear, here's the code:

HTML

<audio id="greeting" src="http://dl.dropbox.com/u/17154625/greeting.ogg" controls></audio>

<div id="text">
   
<span id="w1" class="word" data-start="1.0">Hello</span>,
   and
<span id="w2" class="word" data-start="2.0">welcome</span>
   to Stack
<span id="w3" class="word" data-start="3.0">Overflow</span>.
   Thank you for asking your question.
</div>

CSS

.word {
   color
: red;
}
.word:hover, .word.selected {
    color
: blue
추천 0

등록된 댓글이 없습니다.

?>