[javascript]html5 video stop, reset, load

2014. 2. 19. 16:29ยทLanguages/JavaScript
๋ชฉ์ฐจ
  1. ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์„ค๋ช…
  2. ๋น„๋””์˜ค ์ค‘์ง€:
  3. ๋น„๋””์˜ค ์žฌ์„ค์ •:
  4. ์ƒˆ ๋™์˜์ƒ์„ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.
  5. ๋ถ€์—ฐ ์„ค๋ช…
//var video = document.getElementById("videoContents");
var video = $("#videoContents")[0];
video.pause();
video.currentTime = 0;
$("#videoContents").find("#videoSource").attr("src","URL");
video.load();
$('.videoArea').scrollTop(0);

์ •์ง€ : video.pause();

์ดˆ๊ธฐํ™” : video.currentTime = 0;

๊ตฌํ˜„ : video.load();

thumb

๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์„ค๋ช…

 

 

HTML5 ๋น„๋””์˜ค๋ฅผ ์ค‘์ง€, ์žฌ์„ค์ • ๋ฐ ๋กœ๋“œํ•˜๋ ค๋ฉด JavaScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€์˜ ๋น„๋””์˜ค ์š”์†Œ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ์ด๋Ÿฌํ•œ ๊ฐ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์˜ ์˜ˆ์ž…๋‹ˆ๋‹ค.

๋น„๋””์˜ค ์ค‘์ง€:

var video = document.getElementById('myVideo');
video.pause();
video.currentTime = 0;

์ด ์ฝ”๋“œ์—์„œ๋Š” ๋จผ์ € document.getElementById('myVideo')๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋น„๋””์˜ค ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ pause() ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋น„๋””์˜ค๋ฅผ ์ค‘์ง€ํ•˜๊ณ  currentTime ์†์„ฑ์„ 0์œผ๋กœ ์„ค์ •ํ•˜์—ฌ ๋น„๋””์˜ค๋ฅผ ์ฒ˜์Œ์œผ๋กœ ์žฌ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

๋น„๋””์˜ค ์žฌ์„ค์ •:

var video = document.getElementById('myVideo');
video.currentTime = 0;

๋น„๋””์˜ค๋ฅผ ์žฌ์„ค์ •ํ•˜๋ ค๋ฉด currentTime ์†์„ฑ์„ ๋‹ค์‹œ 0์œผ๋กœ ์„ค์ •ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ƒˆ ๋™์˜์ƒ์„ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.

var video = document.getElementById('myVideo');
video.src = 'newVideo.mp4';
video.load();

์ƒˆ ๋น„๋””์˜ค๋ฅผ ๋กœ๋“œํ•˜๋ ค๋ฉด ๋จผ์ € document.getElementById('myVideo')๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋น„๋””์˜ค ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ src ์†์„ฑ์„ ๋กœ๋“œํ•˜๋ ค๋Š” ์ƒˆ ๋น„๋””์˜ค ํŒŒ์ผ์˜ URL๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ๋งˆ์ง€๋ง‰์œผ๋กœ load() ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋น„๋””์˜ค๋ฅผ ๋‹ค์‹œ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.

๊ฐ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ๊ฐ„๋žตํ•œ ์„ค๋ช…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ถ€์—ฐ ์„ค๋ช…

  • pause(): ๋™์˜์ƒ ์žฌ์ƒ์„ ์ผ์‹œ์ •์ง€ํ•ฉ๋‹ˆ๋‹ค.
  • currentTime: ํ˜„์žฌ ์žฌ์ƒ ์‹œ๊ฐ„์„ ์ดˆ ๋‹จ์œ„๋กœ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  • src: ์žฌ์ƒํ•  ๋ฏธ๋””์–ด ํŒŒ์ผ์˜ URL์„ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  • load(): src ์†์„ฑ์œผ๋กœ ์ง€์ •๋œ ๋ฏธ๋””์–ด ํŒŒ์ผ์„ ๋‹ค์‹œ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.

 

 

728x90
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)
  1. ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์„ค๋ช…
  2. ๋น„๋””์˜ค ์ค‘์ง€:
  3. ๋น„๋””์˜ค ์žฌ์„ค์ •:
  4. ์ƒˆ ๋™์˜์ƒ์„ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.
  5. ๋ถ€์—ฐ ์„ค๋ช…
'Languages/JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [javascript] select box์˜ value selected
  • [jquery]layer popup
  • [javascript]์ฐจํŠธ ๊ด€๋ จ ์Šคํฌ๋ฆฝ
  • [javascript] ๋…„์›”์ผ(YYYYMMDD) ์ฒดํฌ
์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
์ผ์ƒ, ๊ฒŒ์ž„, ๋ง›์ง‘, ์—ฌํ–‰, ๊ฐœ๋ฐœ, IT ๋ธ”๋กœ๊ทธ๐Ÿงž
  • ์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
    ์š”์ˆ  ๋žจํ”„๐Ÿซ–
    ์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • All (549)
      • Languages (57)
        • JAVA (13)
        • JSP (1)
        • C_C++ (4)
        • Html (3)
        • CSS (1)
        • JavaScript (18)
        • Python (3)
        • Kotlin (13)
        • TypeScript (1)
      • Framework (14)
        • spring (11)
        • jstl (1)
        • angular (2)
      • Tool (28)
        • Eclipse (5)
        • vsCode (3)
        • scrcpy (2)
        • Git (1)
        • IntelliJ (6)
        • Visual-studio (1)
        • UML (1)
        • Gradle (8)
      • DB (6)
        • Oracle (1)
        • MySql (3)
        • Mongo (2)
      • OS (14)
        • Linux (2)
        • Windows (12)
      • Server (8)
        • Tomcat (1)
        • Apache (1)
        • Node.js (6)
      • Programmings (25)
        • Design Pattern (2)
        • Funny (20)
        • Algorithms (3)
      • Cloud (8)
        • Docker (1)
        • Kubernetes (4)
        • Istio (1)
        • ArgoCD (2)
      • IT (5)
        • gRPC (3)
        • RESTful (3)
        • Web UI (5)
        • AI (4)
      • Book (6)
      • TIP (187)
      • Life (53)
      • Game (83)
      • Storage (22)
      • ์‹๋‹น (15)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
    • ๋ฐฉ๋ช…๋ก
    • ์‚ฌ์ดํŠธ๋งต
    • RSS
    • ๊ธฐํƒ€ ์†Œ๋“
  • ๋งํฌ

    • ๊ตฌ๊ธ€
    • ๋„ค์ด๋ฒ„
    • ์ •๋ถ€24
    • Spring Framework ๋ฆด๋ฆฌ์ฆˆ ๋…ธํŠธ
    • Kotlin ๋ฆด๋ฆฌ์ฆˆ ๋…ธํŠธ
    • ์นด์นด์˜ค ์• ๋“œํ•
    • ๋ธ”๋กœ๊ทธ ์‚ฌ์ดํŠธ๋งต
    • ๋ธ”๋กœ๊ทธ RSS
  • ๊ณต์ง€์‚ฌํ•ญ

    • ์•ˆ๋…•ํ•˜์„ธ์š”
  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

    ๋ชฌ์Šคํ„ฐํ—Œํ„ฐ์™€์ผ์ฆˆ
    ๋ฐ์ผ๋ฆฌ ๋‰ด์Šค
    ๋‰ด์Šค
    ํƒœ๊ตญ
    ์˜ค๋Š˜์˜๋‰ด์Šค
    ๋ชฌ์Šคํ„ฐํ—Œํ„ฐ๋‚˜์šฐ
    ๋‰ด์Šค ๋ธŒ๋ฆฌํ•‘
    ๋ธŒ๋ฆฌํ•‘
    ํ•œ๋ˆˆ์— ๋ณด๋Š” ์˜ค๋Š˜์˜ ๋‰ด์Šค
    ํ€˜์ŠคํŠธ
  • ์ตœ๊ทผ ๋Œ“๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.3
์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
[javascript]html5 video stop, reset, load

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.