AbemaTVで音量調節用スライダー設置
var result = document.evaluate('//video', document, null, 7, null); var result2 = document.evaluate('//header/p', document, null, 7, null); if(document.getElementById("hoge") == null){ result2.snapshotItem(0).insertAdjacentHTML('afterend', '<input type="range" name="example" step="1" max="100" id="hoge">'); } document.getElementById("hoge").addEventListener('change', function () { for (var i = 0; i < result.snapshotLength; i++) { result.snapshotItem(i).volume = document.getElementById("hoge").value / 100; this.title = document.getElementById("hoge").value + "%"; } }, false);
http://scratchpad.io/flaky-change-6919
input[type=range] { -webkit-appearance: none; appearance: none; background-color: #333333; height: 2px; width: 100%; border-radius: 6px; } /*for chrome*/ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; cursor: pointer; position: relative; border: none; width: 16px; height: 16px; display: block; background-color: #51C300; border-radius: 50%; -webkit-border-radius: 50%; } /*for firefox*/ input[type=range]::-moz-range-thumb { -webkit-appearance: none; appearance: none; cursor: pointer; position: relative; border: none; width: 16px; height: 16px; display: block; background-color: #51C300; border-radius: 50%; -webkit-border-radius: 50%; } input[type=range]::-moz-range-track{ background-color: #333; }