개발자의 끄적끄적

[html/css] html video crossorigin error 해결 방법 html 에서 video 태그를 이용해서 외부 영상 url 을 실행하는 경우가 있습니다. 그럴때는 아래 속성을 video 태그에 추가하시면 됩니다. crossorigin="anonymous" 참고들 하세요!

[html/css] html video tag no download example / html 비디오 태그 다운로드 방지 설정 방법 html 에서 video 태그를 이용하여 영상을 표시하다보면 컨트롤바를 이용합니다. 그 컨트롤바의 내용중 다운로드버튼을 숨기고 싶은경우에는 아래나와있는 옵션을 추가하시면 됩니다. controlsList="nodownload" 옵션이 추가된 video 태그는 아래와 같습니다! 참고들 하세요!

[javascript/jquery] javacsript control video event options example / 자바스크립트 비디오 컨트롤 가능한 옵션들 사이트 [링크] html 에서 video 를 다루다 보면 제어할 수 있는 옵션에 대한 궁금증이 생기게 됩니다. 그럴때 제어할수 있는 항목들을 테스트 버전으로 만들어 놔서 확인이 가능한 사이트가 있어서 공유해보려고 합니다. 들어가서 몇가지 테스트해보시면 금방 아실껍니다! 참고들 하세요! html video options example site : https://www.w3.org/2010/05/video/mediaevents.html HTML5 Video HTML5 Video Events and API This page demonstrates ..

[javascript/jquery] html video canplaythrough event example / html 비디오 태그 재생가능상태 확인하는 방법 html 에서 audio / video 태그를 사용하여 영상 또는 음성 파일을 재생하고자 할때 용량이 크면 로드되는 시간이 걸려서 재생이 가능한 상태인지 확인해야 하는 경우가 있습니다. 그럴때는 아래와 같이 canplaytorough 이벤트를 사용하시면 됩니다. video.addEventListener('canplaythrough', () => { video.play(); }); 위 내용 보시면 아시겠지만, 위 이벤트가 호출되는 시점은, 영상 또는 음성파일이 중단없이 실행이 가능한 상태가 되었다고 판단될때 호출됩니다! 참고들 하세요!

[html/css] video tag 자주 쓰이는 옵션 4가지 html 에서 video 태그를 이용하여 영상을 재생할때 여러가지 옵션들을 줄 수 있습니다. 그중에서 자주 쓰이는 옵션들 4가지를 정리해봤습니다. autopaly : 자동 재생 (true, false) controls: 영상 제어 장치 on, off (true, false) loop : 반복 재생 (true, false) muted : 음소거 (true, false) 자동재생여부 컨트롤버튼 노출여부 반복여부 음소거여부 위 4가지는 거의 video 태그를 사용할때마다 쓰일껍니다! 숙지해두시면 도움이 되실껍니다! 여기서 주의사항은! 모바일에서는 자동재생을 설정하기 위해서는 음소거를 true 로 소리가 안나게 설정해야만 자동재생 설정이 가능합니다...

[html/css] how to hide download button in video tag / 비디오 태그 다운로드 버튼 숨기는 방법 html 에서 video 태그를 이용하여 비디오를 재생할때 오른쪽 하단에 다운로드 버튼이 있어서 이것을 숨기고 싶을때가 있습니다. 그럴때, 아래와 같은 옵션을 주면 됩니다. 위 내용 보시면 아시겠지만, controlsList 라는 attr 을 추가하는데 nodownload 라는 값으로 추가하면 다운로드 버튼이 사라진 것을 확인할 수 있습니다! 참고들 하세요!