혹시 video tag를 이용하여 로딩하는데, 첫화면이 뭉게지거나 깨진다면 "canplaythrough" 이벤트 속성에 프로그램을 하면 PC 성능이 않 좋을수록 기다리는 시간은 오래 걸리지만, 좀 더 나은 결과를 얻을 수 있다. (maybe can not load first shot, you can use "canplaythrough" instead "canplay" in video tag.)
$(document).ready(function() {
document.body.focus();
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "제목",
m4v: mMpegSrc,
poster: "/images/footage/video_error.jpg"
});
},
canplaythrough: function() {
$("#jquery_jplayer_1").jPlayer("play");
$.wait( function(){
if(mTimes == 1) {
$("#jquery_jplayer_1").jPlayer("stop");
$("#jquery_jplayer_1").jPlayer("play");
mTimes = 0;
}
}, 80
);
/*
$("#jquery_jplayer_1").jPlayer("stop");
setTimeout(function () {
$("#jquery_jplayer_1").jPlayer("play");
}, 500);
*/
},
swfPath: '/js/plugin/jquery.jPlayer',
preload: "auto",
supplied: "m4v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
},
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true,
});
$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds);
}
});
참조 (below from) : http://cafe.naver
나만의 콘트를, 첫 시작을 위한 몇 가지 마크업과 스타일
콘트롤의 세가지 구성요소 :
-재생/정지 버튼
-0부터 증가하는 타이머
-음소거/음소거 해제 버튼
재생/정지와 음소거/음소거 해제 버튼의 텍스트는 text-indent속성을 이용해 화면에서 제거된다.
하나의 CSS 스프라이트 이미지가 이처럼 다양한 버튼의 상태(재생,정지,음소거,음소거 해제)를 표시하기 위한배경 이미지로 이용된다.
CSS클래스는 서로 다른 상태를 나타내는 데 사용된다. 이러한 클래스는 자바스크립트를 이용해 추가되거나 삭제
컨트롤 래퍼 요소에는 절대위치absolute를 사용하고 비디오의 하단을 덮도록 배치
컨트롤의 기본 불투명도를 50%로 설정하지만 마우스를 위에 올리면 불투명도는 100%로 증가
기본값으로 컨트롤의 래퍼요소는 hidden이라는 class로서, disply:none으로 설정되고 이것은 자바스크립트에 의해 제거된다.
미디어요소 API소개
var videoE1 = $('video')[0],
playPauseBtn = $('#playPause'),
vidControls = $('#controls'),
muteBtn =$("muteUnmute'),
timeHolder =$('#timer');
1.콘트롤 속성 제거
videoE1.removeAttribute("controls"); //ie9이하 지원안함
2.콘트롤 속성 보이게
videoE1.addEventListener('canplaythrought',function() {
vidControls.removeClass("hidden");
}, false);
비디오재생과 중지
canplaythrought 이벤트가 발생하면 콜백 함수가 작동한다.
비디오의 오디오 트랙에 대한 음소거및 음소거 해제
비디오 재생이 끝났을 때의 반응
비디오 재생에 따른 시간 업데이트
미디어 요소 API의 추가적인 기능
-이벤트
-속성
오디오는 어떤가?
접근가능한 미디어
http://w3schools.com/html5/html5_ref_av_dom.asp
HTML5 Audio/Video Methods
| Method | Description |
|---|---|
| addTextTrack() | Adds a new text track to the audio/video |
| canPlayType() | Checks if the browser can play the specified audio/video type |
| load() | Re-loads the audio/video element |
| play() | Starts playing the audio/video |
| pause() | Pauses the currently playing audio/video |
HTML5 Audio/Video Properties
| Property | Description |
|---|---|
| audioTracks | Returns a MultipleTrackList object representing available audio tracks |
| autoplay | Sets or returns if the audio/video should start playing as soon as its loaded |
| buffered | Returns a TimeRanges object representing the buffered parts of the audio/video |
| controller | Returns the MediaController object representing the current media controller of the audio/video |
| controls | Sets or returns if the audio/video should display controls (like play/pause etc.) |
| crossOrigin | Sets or returns the CORS settings of the audio/video |
| currentSrc | Returns the URL of the current audio/video |
| currentTime | Sets or returns the current playback position in the audio/video (in seconds) |
| defaultMuted | Sets or returns if the audio/video is muted by default |
| defaultPlaybackRate | Sets or returns the default speed of the audio/video playback |
| duration | Returns the duration of the current audio/video (in seconds) |
| ended | Returns if the playback of the audio/video has ended or not |
| error | Returns a MediaError object representing the error state of the audio/video |
| initialTime | Returns the initial play position of the audio/video |
| loop | Sets or returns if the audio/video should start over again when finished |
| mediaGroup | Sets or returns a the group the audio/video belongs to (used to link multiple audio/video elements) |
| muted | Sets or returns if the audio/video is muted or not |
| networkState | Returns the current network state of the audio/video |
| paused | Sets or returns if the audio/video is paused or not |
| playbackRate | Sets or returns the speed of the audio/video playback |
| played | Returns a TimeRanges object representing the already played parts of the audio/video |
| preload | Sets or returns if the audio/video should be loaded when the page loads |
| readyState | Returns the current ready state of the audio/video |
| seekable | Returns a TimeRanges object representing the seekable parts of the audio/video |
| seeking | Returns if the user is currently moving/skipping to a new position in the audio/video |
| src | Sets or returns the current source of the audio/video element |
| startOffsetTime | Returns a Date object representing the current time offset |
| textTracks | Returns a TextTrackList object representing the available text tracks |
| videoTracks | Returns a VideoTrackList object representing the available video tracks |
| volume | Sets or returns the volume level of the audio |
HTML5 Audio/Video Events
| Event | Description |
|---|---|
| abort | Fires when the loading of an audio/video is aborted |
| canplay | Fires when the browser can start playing the audio/video |
| canplaythrough | Fires when the browser can start playing the audio/video to the end without stopping for buffering |
| durationchange | Fires when the duration of the audio/video has been changed |
| emptied | Fires when the current playlist is empty |
| ended | Fires when the current playlist is ended |
| error | Fires when an error occurred during the loading of an audio/video |
| loadeddata | Fires when the browser can start playing the audio/video for the first time |
| loadedmetadata | Fires when the browser has received durations, dimensions and text tracks are ready for the audio/video |
| loadstart | Fires when the browser starts looking for media data |
| pause | Fires when the audio/video has been paused |
| play | Fires when the audio/video has been started or is no longer paused |
| playing | Fires when the audio/video is ready to play after having been paused or stopped for buffering |
| progress | Fires when the browser is getting media data |
| ratechange | Fires when the playing speed of the audio/video is changed |
| seeked | Fires when the user is finished moving/skipping to a new position in the audio/video |
| seeking | Fires when the user starts moving/skipping to a new position in the audio/video |
| stalled | Fires when the browser is trying to get media data, but data is not avaliable |
| suspend | Fires when the browser is intentionally not getting media data |
| timeupdate | Fires when the current playback position has changed |
| volumechange | Fires when the volume has been changed |
| waiting | Fires when the video stops because it needs to buffer the next frame |
...
