타임랩스 페이지

<video style="width: 100%; height: auto;" autoplay="autoplay" loop="loop" muted="" width="300" height="150"> <source src="https://customer-orl7q5xo7k62buu6.cloudflarestream.com/5d1cee415543b83c7cfb731f625a5acd/manifest/video.m3u8" /> </video> PRD 프로세스 애니메이션 파트를 동영상으로 변환한 자료입니다. 태블릿 앱에서 좀 더 선명하고 자세하게 볼 수 있습니다.


Animation 페이지

<video style="width: 100%; height: auto;" autoplay="autoplay" loop="loop" muted="" width="300" height="150"> <source src="https://customer-orl7q5xo7k62buu6.cloudflarestream.com/5d1cee415543b83c7cfb731f625a5acd/manifest/video.mpd" /> </video> PRD 프로세스 애니메이션 파트를 동영상으로 변환한 자료입니다. 태블릿 앱에서 좀 더 선명하고 자세하게 볼 수 있습니다.



비디오 페이지

<video autoplay muted loop playsinline style="width: 100%; height: auto;">
  <source src="https://iconac.kr:443/wordpress_mp4/Video_aerial.mp4" type="video/mp4">
</video>

본 영상은 PRD공사중인 두 현장의 항공촬영 샘플입니다.



interactive

<video autoplay muted loop playsinline style="width: 100%; height: auto;">
  <source src="https://iconac.kr:443/wordpress_mp4/Interactive_test.mp4" type="video/mp4">
</video>

페이지를 읽다보면 어디를 탭하면 되는지, 어떤 내용이 대기중에 있는지 쉽게 알 수 있도록
User eXperience에 근거하여 인터액티브한 앱이 만들어집니다. 필요한 경우 깜박이고 있거나,
흐리게 표현되어 있거나 혹은 "보기" 버튼 등이 대화식 앱 구현의 매개체가 됩니다.





revolution slider

Add layer video해서
https://iconac.kr:83/Video_title.mp4
이걸 video MP4 url에 넣었음
크기는 484 272


cloudflare 영상을 활용하려면 mp4 url은 서비스 하지 않음
현재의 비디오 레이어 지웠고 Add layer 해서 코드를 넣음


<iframe
  src="https://customer-orl7q5xo7k62buu6.cloudflarestream.com/55e36648f798dde311e8886d4b46fc28/iframe?autoplay=true&muted=true&loop=true&poster=https%3A%2F%2Fcustomer-orl7q5xo7k62buu6.cloudflarestream.com%2F55e36648f798dde311e8886d4b46fc28%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
  width="484"
  height="272"
  style="border:none;"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
></iframe>



<iframe
  src="https://customer-orl7q5xo7k62buu6.cloudflarestream.com/16f34fa77f8fc48c19f9db239cf45e35/iframe?autoplay=true&muted=true&loop=true&poster=https%3A%2F%2Fcustomer-orl7q5xo7k62buu6.cloudflarestream.com%2F16f34fa77f8fc48c19f9db239cf45e35%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
  width="484"
  height="272"
  style="border:none;"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
></iframe>


<iframe
  src="https://customer-orl7q5xo7k62buu6.cloudflarestream.com/e1cb3025909e617fe370cbb03c67e7f0/iframe?autoplay=true&muted=true&loop=true&poster=https%3A%2F%2Fcustomer-orl7q5xo7k62buu6.cloudflarestream.com%2Fe1cb3025909e617fe370cbb03c67e7f0%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
  width="484"
  height="272"
  style="border:none;"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
></iframe>