为 HTML5 视频创建自定义音量控制时出现问题

Question

我有一个相当复杂的项目需要自定义音量滑块来控制 HTML5 视频元素。我将音量控制简化为一个非常简单的示例，我看不出它为什么不工作。我希望对以下代码有任何见解：

jQuery:

<script>
$(function() {
    $('#volume').change(function () {
        newvolume = $('#volume').attr("value") / 100;
        $('#video').attr("volume", newvolume);
        console.log($('#video').attr("volume"));
    });
});
</script>

HTML：

<video id="video" controls="controls">
    <source src="http://dev.domain.com/media/16514.m4v">
</video>

<input id="volume" type="range" min="0" max="100" value="100" />

应该注意的是，除了视频剪辑上音量的可听变化外，这一切似乎都有效。即使 console.log 结果返回正确的值（0 到 1.00）我也尝试过严格的 Javascript 版本，即videoElement.volume = newvolume

如果它很重要，我正在 Safari 5.1.2 中进行测试。

Answer 1

不要使用$('#video').attr("volume", newvolume);，试试这个：

$('#video')[0].volume = newvolume;

如果没记错的话，volume 在 HTML5 中不是 video 的属性，它只能通过 DOM 元素本身访问。