无法用button的onclick方法对video进行操作

最新推荐文章于 2024-02-05 23:48:56 发布
最新推荐文章于 2024-02-05 23:48:56 发布
阅读量504 收藏
点赞数
文章标签： html css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39271456/article/details/121562167
版权
本文探讨了JavaScript中常见的`UncaughtTypeError: Cannot read properties of null`错误，该错误通常发生在DOM未完全加载时执行JS代码。解决方案包括将JS引用放置在HTML底部或使用`window.onload`确保DOM加载完成后再执行脚本。
摘要由CSDN通过智能技术生成

一、错误描述：

二、HTML代码如下：

 

 JS代码如下：

三、产生如下错误：

Uncaught TypeError: Cannot read properties of null

四、错误原因：

js引用放在了前面，dom还没渲染好，js就执行了，导致dom为null

五、解决方法：

（1）把js引用放在后面

 （2）使用window.onload

cx0109
关注
HTML5使用DOM进行自定义控制示例代码
12-13
HTML5的video虽然可用controls来展示控件，并进行控制播放暂停等，但是不同的浏览器显示的效果可能不一样，所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。 当然效果不是很美观，若想...
HTML5-video标签-实现点击预览图播放或暂停视频
05-17 5020
刚刚参加工作，开始更多的接触到一些新的知识，促使我开始了解html5和css3的新特性。这时我才真的发现到html5和css3的强大。 之前关于视频的控制更多的是运用复杂来实现，但在html5中新加入了<video>标签以及相应的DOM，通过这项新特性，我们能对网页中的视频进行更多简单的控制。 以下属性内容摘抄至W3CSchool ...
H5网页中的video标签不能自动播放并且play或者click播放按钮无效的原因及解决办法
最新发布
先飞网校
02-05 2643
于是，获取video标签，然后静音：video.muted=true;然后再播放：video.play()获取按钮和video都是可以的，但是无法进行下一步，除非有互动动作，比如点击一下页面任意位置。2、用js获取video标签，play。1、用js获取播放按钮，click；
JavaScript onclick无效果的原因之一
自由如风的博客
11-25 1510
使用let使用闭包直接通过document获取元素然后修改，不要使用i写在最后，AI牛逼。
在微信内置浏览器 ios video再次点击事件没反应 video有些视频上下出现空白原因
感谢遇到的每一个人的博客
11-17 3559
问题一：video再次点击事件没有反应，Android正常 解决办法:在video 标签中加入 ：webkit-playsinline playsinline &lt;div class="dis_video"&gt; &lt;video webkit-playsinline playsinline id="myVideo" onclick="stopPlay...
使用video的那些坑
transform的博客
12-28 6753
2，video标签api中的加载事件支持不太好：在现代浏览器中应该使用监听事件或者jq封装的on事件。而不是用onclick=function（）{}这样的样式 videoEle.addEventListener("durationchange",function(e){        //测试4.2下只执行durationchange事件。        $(videoEle).sib
HTML5-2
weixin_59938047的博客
08-17 144
1.html5新元素video 大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 <video> 元素提供了 播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会
HTML5<video>使用DOM进行自定义控制示例代码
09-28
它的基本使用方法是通过<video>和</video>标签包围视频源文件。在<video>标签内部可以使用来指定视频文件的路径和类型，<video>标签还允许添加一个后备内容，当浏览器不支持<video>元素时，会显示这段内容。 其次，...
H5新属性audio音频和video视频的控制详解（推荐）
09-27
<button onclick="playVideo()">播放</button> <button onclick="pauseVideo()">暂停</button> ``` JavaScript代码如下： ```javascript var myVideo = document.getElementById("video1"); function playVideo()...
arma-4：网站对arma 4进行整体交互
02-16
在Arma 4网站上，用户可能需要进行各种操作，如点击按钮预览游戏视频、滚动浏览新闻更新、填写表单参与社区讨论等。这些都离不开HTML的事件属性，如`onclick`、`onmouseover`等，它们使得静态的HTML元素具备了响应...
Modal Dialog Box in Embedded YouTube Video.zip
11-08
<button onclick="openModal()">Play Video</button> ``` CSS部分则设置模态对话框的样式，使其在默认情况下不可见，但可以通过JavaScript控制显示： ```css .modal { display: none; position: fixed; z-index...
onclick无法生效的可能原因
weixin_45663625的博客
03-23 3008
onclick的作用域问题： onclick需要调用的是全局作用域下的函数 如果onclick的函数在另一个函数中，且使用的是 function()和var xxx = function()则无法调用 因为他俩的作用域是在方法内，相当于方法中的方法 所以无法调用到 因此如果一定要在内部使用，则需要使用 xxx（函数名） = function(){} 才可以。 ...
苹果手机浏览器video点击无效的问题
weixin_34038293的博客
06-14 1678
h5页面添加<video>标签，就是一个大坑，我在这里分享一下自己的一点点小的经验：<video id="myVideo" src="video/myflash.mp4" x5-video-player-type="h5" controls></video><div id="play" class...
掌握HTML5中的多媒体--视频(video)
huobengluantiao8
08-06 449
除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。 下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同. Figure 1 1. &lt;section&gt; 2. &lt;h1&gt;使用HTML5的video标签播放视频&lt;/h1&gt; 3. &lt;vi...
安卓手机微信页面里面的video点击播放按钮失效问题，不能播放视频内容 --------- 仅供参考
热门推荐
WEB-Yao
05-30 1万+
先上图：点击播放按钮无效，只要刷新页面就可以播放，或者从别的页面在进来时，才可以播放。在百度搜索中找到：｛解决方法很简单：在apache的配置中增加如下一句：在apache的配置中加一行：SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|zip|mp4)$ no-gzip dont-vary｝加上以后依然没有任何作用。别的页面也有视频就可以进去就能播放，代...
html5 点一个按钮,播放一个相应的视频
qq_45251619的博客
03-19 5331
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5视频播放器</title> </head> <body> <video id="myVideo">你的浏览器不支持video标签</video> <a href="#" onClick="playlist(this)" id="https://www.v
video视频无法自动播放的前端解决方法
05-10
在现代浏览器中，自动播放视频通常需要与用户交互（例如点击）才能触发。这是为了避免不必要的带宽消耗和用户体验问题。 如果你想要实现自动播放视频，你可以考虑以下解决方案： 1. 在页面加载时自动播放视频 在 HTML 的 `video` 标签中添加 `autoplay` 属性，可以在页面加载时自动播放视频。但是，大多数浏览器都会忽略此属性，需要与用户的交互才能触发自动播放。 ```html <video autoplay> <source src="yourvideo.mp4" type="video/mp4"> </video> ``` 2. 通过 JavaScript 触发自动播放 通过 JavaScript 可以在用户交互事件触发后自动播放视频，例如用户点击按钮或滚动页面。可以使用 `play()` 方法来触发视频的自动播放。 ```html <button onclick="playVideo()">播放视频</button> <video id="myVideo"> <source src="yourvideo.mp4" type="video/mp4"> </video> <script> function playVideo() { var video = document.getElementById("myVideo"); video.play(); } </script> ``` 3. 使用第三方库 一些第三方库，如 Plyr 和 Video.js，可以在用户交互事件触发后自动播放视频，并提供更多的播放控件和功能。你可以尝试使用这些库来实现自动播放视频。 以上是几种实现自动播放视频的方法，但是需要注意，自动播放会影响用户体验和带宽消耗，因此建议在必要时才使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值