为啥不从 jquery 工作和从 getElementById 创建视频变量呢？

Posted 2023-05-07

【中文标题】为啥不从 jquery 工作和从 getElementById 创建视频变量呢？

【英文标题】：Why doesn't creating video var from jquery work and from getElementById does?为什么不从 jquery 工作和从 getElementById 创建视频变量呢？

【发布时间】：2015-04-17 02:12:43

【问题描述】：

这对我来说没有意义，getElementById 工作得很好，但我想使用 jquery 来保持我的网站访问元素的模式。有什么想法吗？

<script>
    $(document).ready(function () 

        var vid = document.getElementById("myVideo"); //$("#myVideo");

        $("#btnFullScreen").click(function () 
            vid.requestFullscreen();
        );

        $("#btnPlay").click(function () 
            console.log("play");
            vid.play();
        );

        $("#btnPause").click(function () 
            console.log("pause");
            vid.pause();
        );

    );

</script>

【问题讨论】：

“我想使用 jquery 来保持我的网站访问元素的模式。” 为什么？原生 javascript 方法总是比 jQuery 快……而且，您不能在 jQuery 元素上使用 DOM 方法（这就是它不起作用的原因）。您不应该将 JavaScript 转换为 jQuery 用于 pattern.

Play/pause html 5 video using JQuery的可能重复

【参考方案1】：

如果你使用$("#myVideo");，它会返回没有.play或.pause这样的方法的jQuery对象，在我们的例子中你需要得到像$("#myVideo").get(0)这样的DOM元素

jQuery .get

【参考方案2】：

原版结果与 JQ 相比略有不同：请参阅 fiddle

var jsDiv = document.getElementById("myVideo");
var jqDiv = $("#myVideo");

console.log(jsDiv);
console.log(jqDiv);

这就是为什么您的 JQ 解决方案不适用于 .play()，因为它是 JQ 对象而不是“纯”DOM 元素。

如果你想从 JS 和 JQ 得到相同的结果，使用$("#myVideo")[0]

【参考方案3】：

如果你使用 jQuery 选择一个对象，你会得到一个返回的 jQuery 对象，而不是实际的 DOM 元素。

假设页面上只有一个#myVideo 元素，您可以这样访问它：

var vid = $('#myVideo')[0];

或

var vid = $('#myVideo').get(0);