HHF auto play w mute; change play button design
Showing
4 changed files
with
70 additions
and
26 deletions
| 1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 1 | <?xml version="1.0" encoding="utf-8"?> | ||
| 2 | <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | ||
| 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | ||
| 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| 5 | viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve"> | ||
| 6 | <style type="text/css"> | ||
| 7 | .st0{opacity:0.75;} | ||
| 8 | .st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;} | ||
| 9 | .st2{fill:#FFFFFF;} | ||
| 10 | </style> | ||
| 11 | <title>play</title> | ||
| 12 | <g class="st0"> | ||
| 13 | <circle class="st1" cx="41.6" cy="41.6" r="37.6"/> | ||
| 14 | <polygon class="st2" points="29.5,57.3 29.5,26.5 62.3,41.9 "/> | ||
| 15 | </g> | ||
| 16 | </svg> | ... | ... |
| ... | @@ -46,18 +46,6 @@ | ... | @@ -46,18 +46,6 @@ |
| 46 | eyeBuild.doIAT(1); | 46 | eyeBuild.doIAT(1); |
| 47 | } | 47 | } |
| 48 | }); | 48 | }); |
| 49 | var play = function(){ | ||
| 50 | video.play(); | ||
| 51 | videoPlays++; | ||
| 52 | videoControls.className = "" | ||
| 53 | toggleClass(videoControls, "playing"); | ||
| 54 | toggleClass(playButton, "playing"); | ||
| 55 | } | ||
| 56 | var pause = function(){ | ||
| 57 | video.pause(); | ||
| 58 | toggleClass(videoControls, "playing"); | ||
| 59 | toggleClass(playButton, "playing"); | ||
| 60 | } | ||
| 61 | video.addEventListener('ended', function(e){ | 49 | video.addEventListener('ended', function(e){ |
| 62 | video.currentTime = 0; | 50 | video.currentTime = 0; |
| 63 | pause(); | 51 | pause(); |
| ... | @@ -99,6 +87,25 @@ | ... | @@ -99,6 +87,25 @@ |
| 99 | } | 87 | } |
| 100 | } | 88 | } |
| 101 | }, false); | 89 | }, false); |
| 90 | var play = function(){ | ||
| 91 | video.play(); | ||
| 92 | videoPlays++; | ||
| 93 | videoControls.className = "" | ||
| 94 | toggleClass(videoControls, "playing"); | ||
| 95 | toggleClass(playButton, "playing"); | ||
| 96 | } | ||
| 97 | var pause = function(){ | ||
| 98 | video.pause(); | ||
| 99 | toggleClass(videoControls, "playing"); | ||
| 100 | toggleClass(playButton, "playing"); | ||
| 101 | } | ||
| 102 | var mute = function(){ | ||
| 103 | video.muted=true; | ||
| 104 | toggleClass(muteButton, "muted"); | ||
| 105 | } | ||
| 106 | |||
| 107 | mute(); | ||
| 108 | play(); | ||
| 102 | 109 | ||
| 103 | } | 110 | } |
| 104 | 111 | ... | ... |
| 1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 1 | <?xml version="1.0" encoding="utf-8"?> | ||
| 2 | <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | ||
| 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | ||
| 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| 5 | viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve"> | ||
| 6 | <style type="text/css"> | ||
| 7 | .st0{opacity:0.75;} | ||
| 8 | .st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;} | ||
| 9 | .st2{fill:#FFFFFF;} | ||
| 10 | </style> | ||
| 11 | <title>play</title> | ||
| 12 | <g class="st0"> | ||
| 13 | <circle class="st1" cx="41.6" cy="41.6" r="37.6"/> | ||
| 14 | <polygon class="st2" points="29.5,57.3 29.5,26.5 62.3,41.9 "/> | ||
| 15 | </g> | ||
| 16 | </svg> | ... | ... |
| ... | @@ -46,18 +46,6 @@ | ... | @@ -46,18 +46,6 @@ |
| 46 | eyeBuild.doIAT(1); | 46 | eyeBuild.doIAT(1); |
| 47 | } | 47 | } |
| 48 | }); | 48 | }); |
| 49 | var play = function(){ | ||
| 50 | video.play(); | ||
| 51 | videoPlays++; | ||
| 52 | videoControls.className = "" | ||
| 53 | toggleClass(videoControls, "playing"); | ||
| 54 | toggleClass(playButton, "playing"); | ||
| 55 | } | ||
| 56 | var pause = function(){ | ||
| 57 | video.pause(); | ||
| 58 | toggleClass(videoControls, "playing"); | ||
| 59 | toggleClass(playButton, "playing"); | ||
| 60 | } | ||
| 61 | video.addEventListener('ended', function(e){ | 49 | video.addEventListener('ended', function(e){ |
| 62 | video.currentTime = 0; | 50 | video.currentTime = 0; |
| 63 | pause(); | 51 | pause(); |
| ... | @@ -99,6 +87,25 @@ | ... | @@ -99,6 +87,25 @@ |
| 99 | } | 87 | } |
| 100 | } | 88 | } |
| 101 | }, false); | 89 | }, false); |
| 90 | var play = function(){ | ||
| 91 | video.play(); | ||
| 92 | videoPlays++; | ||
| 93 | videoControls.className = "" | ||
| 94 | toggleClass(videoControls, "playing"); | ||
| 95 | toggleClass(playButton, "playing"); | ||
| 96 | } | ||
| 97 | var pause = function(){ | ||
| 98 | video.pause(); | ||
| 99 | toggleClass(videoControls, "playing"); | ||
| 100 | toggleClass(playButton, "playing"); | ||
| 101 | } | ||
| 102 | var mute = function(){ | ||
| 103 | video.muted=true; | ||
| 104 | toggleClass(muteButton, "muted"); | ||
| 105 | } | ||
| 106 | |||
| 107 | mute(); | ||
| 108 | play(); | ||
| 102 | 109 | ||
| 103 | } | 110 | } |
| 104 | 111 | ... | ... |
-
Please register or sign in to post a comment