자바스크립트 값 ajax로 넘기는 방법
본문
<script>
player.on('timeupdate', function(data) {
currentTimeRange.val((data.percent * 100).toFixed(0) + '%')
});
var currentTimeRange = $('#current-time-range');
</script>
<input class="event" id="current-time-range" type="text" value>
위 소스는 동영상 플레이어 vimeo에서 동영상 실시간 재생율과 재생시간(currentTimeRange)을 텍스트 박스(#current-time-range)에 표시해주는 소스입니다.
이건 아주 잘됩니다.
그런데 저기서 currentTimeRange 값을 그대로 ajax를 이용해서 currentTimeRange 값을 넘길려고 합니다.
(데이터 넘기는 부분만 예시)
data : {
필드명 : currentTimeRange
}
이렇게 했더니 값이 넘어가지 않네요.(다른필드 값은 잘 넘어갑니다.)
값을 넘길수 있는 방법이 있을까요?
답변 3
현재 변수대로라면 값을 넘기는게 아니라 HTMlElement 객체를 넘겨주는 형태로 보이네요
값을 넘겨주고 싶다면 currentTimeRange.val()로 하셔야 할것 같습니다.
필드명 : currentTimeRange.val()
하니깐 되네요 ㅠㅠ 이걸 왜 생각 못했는지 반성해야겠습니다. 정말 감사드립니다.
안녕하세요. Dessi님.
궁금한 것을 찾아헤메다 Dessi님이 질문하신 이 글을 보고 실례지만 질문을 드려봅니다.
혼자서는 도저히 답을 찾을 길이 없어.. 막막한 마음에 도움을 요청드립니다.
그누보드를 이용해 온라인 동영상사이트를 만들고 있습니다.
동영상은 '비메오'에 업로드하고 그누보드 게시판 뷰페이지에서 링크해둔 주소를 통해 자동재생되게끔 하고 있는데요..
이때 뷰페이지에서 로딩되는 동영상(비메오)의 재생시간을 캐치해서 aaa라는 테이블 여분필드(wr_1)에 저장하려고 합니다.
Dessi님의 질문 글에 적힌 코드를 보고
제가 만들고 있는 곳에 적용을 하려하는데 아무리 해도 저는 실시간 재생률(data.percent) 값이 나오지 않네요..
<script src="https://player.vimeo.com/api/player.js"></script>
<!-- video -->
<div itemprop="description" class="view-content">
<?php echo get_view_thumbnail($view['content']); ?>
</div>
<script>
var vimeoPlayer = new Vimeo.Player( $("#vimeoVideo") );
vimeoPlayer.on('timeupdate', function(data) {
currentTimeRange.val((data.percent * 100).toFixed(0) + '%')
});
var currentTimeRange = $('#current-time-range');
</script>
<input class="event" id="current-time-range" type="text" value>
//이 input 박스안에 아무 값도 보이지 않습니다.ㅜ.ㅜ
//data.percent값을 구하고 싶은데 도통 모르겠네요..
대신 아래처럼 콘솔창에는 잘 나오긴 하네요..
vimeoPlayer.on('ended', function(data) {
console.log(data.duration, data.percent, data.seconds);
});
콘솔창이 아닌 뷰페이지 본문에 보이게 하고싶고 그 값을 받아 다음단계?(ajax)를 거쳐 최종적으로 aaa테이블 wr_1에 이 data.percent 값을 저장하고 싶습니다.
잠시나마 시간을 내어 가르침을 주시면 너무너무 감사하겠습니다.
<script>
var vimeoPlayer = new Vimeo.Player( $("#vimeoVideo") );
var currentTimeRange = $('#current-time-range');
vimeoPlayer.on('timeupdate', function(data) {
currentTimeRange.val((data.percent * 100).toFixed(0) + '%')
});
</script>
currentTimeRange 의 선언이 되는 순서를 위로 변경하시면 가능할 것 같습니다.
저도 이번에 코로나 때문에 동영상 게시판을 만들다가 여러가지 시도 끝에 어느정도 성공했습니다.
아직 초보 개발자라 코드가 많이 허접하지만 성공은 했는데 참고하셨으면 좋겠습니다.
기본적으로 필드 개념과 그누보드 기본 구조를 아신다는 가정하에 답변 달아드립니다.
그리고 아래 코드는 제가 여러가지를 테스트하다가 만든거라서 순서도 일관성이 없고 필드명도 테스트 이런식으로 하다가 사용하고 있음을 안내드립니다.
1. 우선 저는 아래 사이트에서 많이 정보를 얻을수 있었습니다.
http://www2.hawaii.edu/~janst/2020/vimeo/vimeo.html
http://www2.hawaii.edu/~janst/2020/vimeo/static/internal/api-demo.js
2. 테이블 생성
- g5_video_log 테이블을 만들어 board, wr_id, mb_id, m_name, sdatetime, log, test2, test 필드를 만들었습니다.
3. 뷰페이지 방문시 사용자 로그 생성
$sql = "select max(`log`) as max from `g5_video_log` where `wr_id` = '".$view['wr_id']."' and `mb_id` = '".$member['mb_id']."' ";
$row2 = sql_fetch($sql);
if ( $row2['max'] ) {
$log = $row2['max']+1;
}else{
$log = "1";
}
$sql6 = "insert `g5_video_log` set
`board` = '".$board['bo_table']."',
`wr_id` = '".$view['wr_id']."',
`mb_id` = '".$member['mb_id']."',
`m_name` = '".$member['mb_name']."',
`log` = '".$log."',
`sdatetime` = '".G5_TIME_YMDHIS."'";
sql_query($sql6);
이렇게 했는데 두 번씩 중복되서 테이블이 생성 될 때가 있더라구요. 이건 아직 해결 못했습니다.
4. view.skin.php에서
$sql5 = "SELECT * FROM `g5_video_log` WHERE `wr_id` = '".$view['wr_id']."' AND `mb_id` = '".$member['mb_id']."' AND `log` = '".$log."' ORDER BY `log` DESC limit 1;";
$slog = sql_fetch($sql5); //이미 테이블이 생성 되어있다면 가장 마지막 로그를 찾음
- 비메오 api 불러옴
<script src="https://player.vimeo.com/api/player.js"></script>
- 비메오 iframe 불러오기(저는 wr_7에 비메오 동영상 아이디(숫자)만 넣어서 아래처럼 했습니다.)
<iframe id="vimeo" src="https://player.vimeo.com/video/<?php echo $view['wr_7']?>?quality=1080p" width="1000" height="560" alt="<?php echo $view['wr_7'] ?>" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style=""></iframe>
- 재생시간(초) 및 재생율 담기 필드(hidden 필드는 보안에 안좋아서 이걸로 안하고 다르게 해도 되는데 처음에 이것저것 테스트하다가 그냥 쓰고있습니다.)
<input class="event" id="current-time-range3" type="hidden" value>
<input class="event" id="currentTimeSecond" type="hidden" value>
<script>
var player = new Vimeo.Player($('iframe'));
var currentTimeRange1 = $('#current-time-range3'); //재생 퍼센트 저장
var currentTimeSecond = $('#currentTimeSecond'); //재생 초 저장
</script>
5. 재생시간 실시간으로 담기(10초마다)
<script>
var timer;
player.on('play', function(data) { //비메오 재생을 하면
timer = setInterval(function()
{
$.ajax({
url:g5_url+'/ajax/video_log.php',//php함수가 실행될 경로 및 파일
data : {
table : "<?php echo $bo_table ?>",
wr_id : "<?php echo $view['wr_id']?>",
mb_id : "<?php echo $member['mb_id']?>",
log : "<?php echo $slog['log'] ?>",
sec : currentTimeSecond.val(),
time : currentTimeRange1.val()
},
type : 'POST', //보낼 데이터가 있으면
});
},10000);
});
player.on('pause', function(data) { // 정지 누르면 스톱
clearInterval(timer);
});
});
</script>
6. ajax/video_log.php의 내용
$sql5 = "SELECT `test2` FROM `g5_video_log` WHERE `wr_id` = '".$_POST['wr_id']."' AND `mb_id` = '".$_POST['mb_id']."' AND `log` = '".$_POST['log']."'";
$slog = sql_fetch($sql5);
$sql6 = "update `g5_video_log` set
`edatetime` = '".G5_TIME_YMDHIS."', `test2` = '".$_POST['time']."', `test` = '".$_POST['sec']."'
where `log` = ".$_POST['log']."
and `wr_id` = '".$_POST['wr_id']."'
and `mb_id` = '".$_POST['mb_id']."'
";
sql_query($sql6);
코드가 너무 정신없고(테스트용으로 막 만들다가 갑자기 잘되서 실사용 한거라서 이해해주세요)
이해가 잘 안되실수도 있지만 참고하셨으면 좋겠습니다. 궁금한점은 쪽지 주세요.
<script>
player.on('timeupdate', function(data) {
currentTimeRange.val((data.percent * 100).toFixed(0) + '%')
});
var currentTimeRange = $('#current-time-range').val();
</script>
<input class="event" id="current-time-range" type="text" value>
var 를 통해 지정된 부분이 벨류값이어야 하는게 아닐까요?
답변 주셔서 감사드립니다. 볼피드님 답변으로 해결 되었습니다.
