비디오 재생문제 좀
본문
모바일에서입니다^^
<div id="tab_content6" style="display:none;">
<video src="/1111/0.mp4" playsinline loop muted autoplay></video>
</div>
div 안에 video 가 있으니 작동이 안되는데
div 없에고
<video src="/1111/0.mp4" playsinline loop muted autoplay></video>만있으니 자동재생되네요
왜 그러는건가요?
<?
error_reporting(E_ALL);
ini_set("display_errors", 1);
$dirname = array("department store", "video");
$entrys = array();
foreach( $dirname as $val ) {
$path = "./". $val ;
$entrys[$val] = array();
if( is_dir($path) ) {
$dirs = dir($path);
while( false !== ($entry = $dirs->read()) ) {
if(($entry != '.') && ($entry != '..')) {
$entrys[$val][] = $entry;
}
}
$dirs->close();
}
}
?>
<script type="text/javascript">
function tab_change(num) {
var tab_content;
for (var i=1; i<=9; i++)
{
tab_content = document.getElementById("tab_content"+i);
if (i==num) {
tab_content.style.display = "";
}
else {
tab_content.style.display = "none";
}
}
}
</script>
<div id="shop">
<?
for( $i=0, $cnt=count($dirname); $i < $cnt; $i ++ ) {
?>
<div id="tab_content6" style="display:none;">
<video src="/1111/0.mp4" playsinline loop muted autoplay></video>
</div>
<?
}
?>
</div>
답변 4
display:none 되면 객체가 없기 때문에 video 태그가 정상 작동하지 않습니다.
display 방식이 아닌 resize 방식으로 하세요.
<div id="tab_content6" style=" resize:none; ">
<video src="/sightseeing_list/list/dongdaegustation(shinsegae)/video/0.mp4" class="v01" style="height:500px;"playsinline loop muted autoplay type="mp4" alt="map"/>
</div>
이런식으로 하닌까 tab_content6 버튼안에 들어가있지않고 밖으로 나와있는데요^^;;
버튼을 누르면 보이게하는거거든요
resize 방식으로 크기를 0으로 줄여 보이지 않게 했다가가 버튼을 눌러 보여줄려고 할때 크기를 늘려서 객체를 보이게 하라는 의미입니다.
아래 스크립트 추가하시면요?
$(function(){
$("#tab_content6").show();
});
밑에처럼해봤는데 똑같아요^^ 이미지처럼 꼼짝도안해요 동영상인데 ㅋ
resize를 넣으니 가능하네요 ㅋㅋ 그런데 버튼을 클릭하기전에 미리 나와서 재생이되고있어요
하지만 버튼을 누르면 동영상이 나오긴해요
미리나와있지않고 버튼을 누르면 나오게는 안되나요?
if (i==num) {
tab_content.style.display = "";
}
else {
tab_content.style.resize= "none";
}
}
}
$(function(){
$("#tab_content6").show();
});
</script>
<div id="shop">
<?
for( $i=0, $cnt=count($dirname); $i < $cnt; $i ++ ) {
?>
<input type="button" name="tab_radio" value="<?=$dirname[$i]?>" style="width:115px" onclick="tab_change(<?=($i+1)?>)" />
<div id="tab_content6" style=" display:none; ">
<video src="/sightseeing_list/list/dongdaegustation(shinsegae)/video/0.mp4" class="v01" style="height:500px;"playsinline loop muted autoplay type="mp4" alt="map"/>
</div>
<?
}
?>
</div>
div요소에 display:none 이라는 css가 적용되서 안보이겠죠.
해당 스타일을 제거하시면 대부분의 모바일에서는 video 태그를 지원하니 작동할 겁니다.
그런데 저는 버튼을 누르면 동영상이 나와서 자동재생되게할려고하는거라 이걸 지우니 버튼 밖으로 나와서 재생되더라고요
style="width:0; height:0; overflow:hidden;"
style 부분은 이렇게 바꿔 보세요.
스크립트는
if(i == num) {
tab_content.style.removeProperty("overflow");
} else {
tab_content.style.overflow = "hidden";
}
이런 식의 편법으로도 될 것 같네요.
왕계란님 도와주세요^^;;
resize를 넣으니 가능하네요 ㅋㅋ 그런데 버튼을 클릭하기전에 미리 나와서 재생이되고있어요
하지만 버튼을 누르면 동영상이 나오긴해요
미리나와있지않고 버튼을 누르면 나오게는 안되나요?
if (i==num) {
tab_content.style.display = "";
}
else {
tab_content.style.resize= "none";
}
}
}
$(function(){
$("#tab_content6").show();
});
</script>
<div id="shop">
<?
for( $i=0, $cnt=count($dirname); $i < $cnt; $i ++ ) {
?>
<input type="button" name="tab_radio" value="<?=$dirname[$i]?>" style="width:115px" onclick="tab_change(<?=($i+1)?>)" />
<div id="tab_content6" style=" display:none; ">
<video src="/1111/0.mp4" class="v01" style="height:500px;"playsinline loop muted autoplay type="mp4" alt="map"/>
</div>
<?
}
?>
</div>