首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在没有jQuery的情况下将播放事件绑定到AJAX加载的视频?

在没有jQuery的情况下,可以使用原生JavaScript来将播放事件绑定到通过AJAX加载的视频。

  1. 首先,通过AJAX请求获取视频资源的URL。
  2. 创建一个新的video元素,使用document.createElement('video')
  3. 设置video元素的src属性为获取到的视频URL。
  4. 监听video元素的loadeddata事件,表示视频资源已加载完毕。
  5. loadeddata事件的回调函数中,可以将播放事件绑定到video元素上。

以下是示例代码:

代码语言:txt
复制
// 通过AJAX获取视频URL
var xhr = new XMLHttpRequest();
xhr.open('GET', 'video_url_endpoint', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    var videoUrl = xhr.responseText;

    // 创建video元素
    var video = document.createElement('video');

    // 设置video的src属性为获取到的视频URL
    video.src = videoUrl;

    // 监听loadeddata事件
    video.addEventListener('loadeddata', function() {
      // 在视频资源加载完成后,绑定播放事件
      video.addEventListener('play', function() {
        // 播放事件处理逻辑
      });
    });
  }
};
xhr.send();

需要注意的是,上述示例代码仅展示了如何将播放事件绑定到AJAX加载的视频,实际应用中还需要处理播放器的控制、错误处理等其他逻辑。

推荐的腾讯云相关产品:由于不提及具体品牌商,无法给出腾讯云相关产品的介绍和链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一个小时学会jQuery

前一段时间录了一套关于jQuery视频分享给大家,可以在下载区下载到,本来想配合文字一起,后面发现视频+帮助文档也是非常好学习方法。...这种情况下,$.ajax()不再返回一个XMLHttpRequest对象,并且也不会传递事件处理函数,比如beforeSend。 5.3、发送数据服务器 默认情况下Ajax请求使用GET方法。...Ajax第一个字母是asynchronous开头字母,这意味着所有的操作都是并行,完成顺序没有前后关系。...设置为 false 将不会触发全局 AJAX 事件 ajaxStart 或 ajaxStop 可用于控制不同 Ajax 事件。...isLocal   map 默认: 取决于当前位置协议 允许当前环境被认定为“本地”,(文件系统),即使jQuery默认情况下不会承认它。

18.5K71
  • 基于jQuery 常用WEB控件收集

    可以通过CSS定制外观,指定文件树展开图标,可以自己定义展开/收缩事件、速度,配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。...能够按比例创建缩略图并剪切成适合在缩略图容器中显示小图片。能够触一些事件,因此可以在图片加载时执行一些动作。...tablesorter idTabs idTabs是一个能够创建简单复杂Tab控件jQuery插件。支持动态添加和选择Tab,idTabs能够绑定不同事件mouseover。...这个jQuery slideshow可以设置当页面打开时自动播放图片并能够最近查看图片存储在cookie中。...Simple Controls Gallery Ajaxify Ajaxify这个jQuery插件能够一个页面中所有链接转换成Ajax加载和提交请求。

    7.5K10

    jQuery 教程

    如果在文档没有完全加载之前就运行函数,操作可能失败。...添加 click 事件之间要切换两个或多个函数 trigger() 触发绑定被选元素所有事件 triggerHandler() 触发绑定被选元素指定事件所有函数 unbind() 从被选元素上移除添加事件处理程序...AJAX 简介 AJAX 是与服务器交换数据技术,它在不重载全部页面的情况下,实现了对部分网页更新。...简短地说,在不重载整个网页情况下AJAX 通过后台加载数据,并在网页上进行显示。 使用 AJAX 应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。...> jQuery AJAX 方法 AJAX 是一种与服务器交换数据技术,可以在不重新载入整个页面的情况下更新网页一部分。

    17K20

    HTML5新特性

    :仅预加载视频元数据(尺寸、时长、第一帧内容),没有视频缓冲 C. none:不预加载任何数据 以下为JS对象属性,不能用于标签 ①. currentTime:当前播放时长 ②. duration:...成员事件 ①. onplay:当视频开始播放时触发事件 ②. onpause:当视频开始暂停时触发事件 11....⑤. preload:视频加载策略,可取值 A. auto:预加载视频元数据以及缓冲一定时长 B. metadata:仅预加载视频元数据(尺寸、时长、第一帧内容),没有视频缓冲 C. none:...成员事件 ①. onplay:当视频开始播放时触发事件 ②. onpause:当视频开始暂停时触发事件 12....SVG图形中为元素绑定事件监听 SVG图形中每个图形/图像都是一个标签,可以很方便进行事件绑定 SVG绘图特点-着重注意! (1). 所有的图形默认只有填充色(黑色),没有描边色 (2).

    7.7K30

    jQuery学习笔记

    ).ready(function) |函数绑定文档就绪事件(当文档完成加载时) | |$(selector).click(function) |触发或函数绑定被选元素点击事件 | |...|触发、或函数绑定指定元素 change 事件 | |click() |触发、或函数绑定指定元素 click 事件 | |dblclick() |触发...| |focus() |触发、或函数绑定指定元素 focus 事件 | |keydown() |触发、或函数绑定指定元素 key down 事件 |...,指定索引) filter()返回可匹配所有元素 not() 返回不匹配所有元素 jQuery AJAX AJAX AJAX = 异步JavaScript + XML 在不重载网页情况下...,后台加载数据并显示在页面上 AJAX菜鸟教程 jQuery ajax()方法 AJAX load() load() 从服务器加载数据,并返回数据 常常利用:调用一个重复代码块,例如网页导航

    7.4K30

    jQuery笔试题汇总整理--2018

    在这里我JQ一些面试题进行了整理,希望对大家有所帮助! 1、你为什么要使用jQuery?你觉得jquery有哪些好处?...1、因为jQuery是轻量级框架,大小不到30kb 2、它有强大选择器,出色DOM操作封装 3、有可靠事件处理机制(jQuery在处理事件绑定时候相当可靠) 4、完善ajax(它ajax...,并调用执行绑定函数 3、你知道jQuery选择器吗,有哪些选择器 大致分为:基本选择器,层次选择器,表单选择器 基本选择器:id选择器,标签选择器,类选择器等 层次选择器::$("form input...JSON,在什么情况下使用?   ...expr)搜索所有与指定表达式匹配元素.   7)bind(type,[data],fn)为每个匹配元素特定事件绑定事件处理函数.   8)empty()删除匹配元素集合中所有的子节点.

    2.5K21

    jQuery

    方式1:jQuery对象[index] 方式2:jQuery对象.get(index) 3.在3.0版本后jQuery页面加载成功事件无顺序,是随机 jQuery2.0前(不含2.0)1.11版本用多...二、jQuery事件 在js事件中,事件前加on,可以通过绑定事件和派发事件两种方式。...而在jQuery事件没有on,直接写名称即可. 1.页面加载成功事件 格式1: $(document).ready(function(){}); 格式2: $(function(){}); 注意:同一个页面内...function(){}); 要将jq代码写在head标签中,那么要保页面加载成功后才能使用jq事件jQuery对象.事件名称(fun(){}),完成绑定!...jQuery事件绑定与解绑: on 绑定事件: jQuery对象.on("事件名称",function(){}) off 解绑事件: jQuery对象.off("事件名称") |如果不给名称

    4.3K20

    看不完那种!前端170面试题+答案学习整理(良心制作)

    javascript操作,有异步操作,ajax读取服务器数据,有同步操作,遍历一个大型数组,它们都不能立即得到结果。...26.jqueryjquery ui区别 jquery是一个javascript库,主要提供选择器,属性修改和事件绑定等功能。...,也会移除元素内部一切,包括绑定事件以及与该元素相关jquery数据 detach()虽然可以元素自身移除,但是它不会删除数据和绑定事件 57.如何利用jquery,来向一个元素添加或移除css...如何给jQuery动态添加新元素,如何给新生产元素绑定事件 jQueryhtml()可以给当前元素添加新元素。直接在元素还未生成前就绑定事件肯定是无效,因为所绑定元素目前根本不存在。...所以可以用live方法来动态绑定事件。 113.使用jQuery动画 hide()和show()可以同时修改多个样式属性,高度,宽度,不透明度。

    11.5K50

    记录工作中遇到各种问题(Bug,总结,记录)

    第二个坑是它直接把绑定元素事件都注销了,这样太暴力很不好 ?...有个弹窗组件叫做 Layer.js,发现个问题是在layer弹出层中播放视频视频全屏按钮失效 ? 没啥办法了,最后直接暴力地解决了 ? 23....页面上可播放视频大多需要是mp4格式,且其格式需是H.264,否则某些情况下会碰到有声音没画面的现象 40....Chrome新版本插件列表中默认没有Shockwave Flash,某些Flash播放器会失效(如果播放前查询插件是否存在) 在比较旧浏览器中是可以正常播放Flash视频,有直接就能播放,也有提示选择打开...但在新版Chrome中(62),连提示都没有了,需要手动在设置中添加Flash支持网站例外才能播放 看了所用Flash播放器(CuPlayer),播放前是先检测插件是否存在,这造成了在新版Chrome

    18.1K12

    jQuery

    Event 函数 绑定函数至 $(document).ready(function) 函数绑定文档就绪事件(当文档完成加载时) $(selector).click(function) 触发或函数绑定被选元素点击事件...$(selector).dblclick(function) 触发或函数绑定被选元素双击事件 $(selector).focus(function) 触发或函数绑定被选元素获得焦点事件(被选中...) $(selector).mouseover(function) 触发或函数绑定被选元素鼠标悬停事件 隐藏和显示 $(selector).hide(); $(selector).hide(speed...这意味着可以在不重新加载整个网页情况下,对网页某部分进行更新。 方法 描述 open(method, url, async) 规定请求类型、URL 以及是否异步处理请求。...AJAX & ASP/PHP/DB/XML 通过标签绑定事件绑定函数在服务器响应就绪时调用函数,发送HTTP请求,访问asp/php文件,文件中对数据库进行查询。

    16.4K20

    NProgress.js - 前端全站进度条插件 - 给你网站添加一个加载进度条

    正巧前几天发现因为网站带宽原因,一些页面加载会花一些时间,页面没有任何动静仿佛会让人浏览体验变差,因为太穷无奈只有在不花钱情况下提升一点点浏览体验(不知道是不是因为我强迫症原因),这时候给网站添加一个加载进度条...pjax事件绑定 完成了与pjax绑定,接下来是第一次加载页面时加载进度条,在任意位置插入script标签及以下JavaScript代码即可 NProgress.start(); //刷新和进入时加载...ajax加载,因此接下来我们把NProgress与文章列表ajax事件绑定 因为cuteen主题ajax加载没有设置触发事件,所以我们自己写一套连缀触发事件 这里参考jQueryajax全局事件:...jqueryajax全局事件, 会在任意一个ajax请求执行时候触发,ajax提供了6个全局事件函数,会被页面中所有的ajax请求触发,在不同时间点会触发不同全局事件。...jQuery全局事件需要document注册,写法是固定,如下: $(document).ajaxStart(function () { console.log("ajaxStart在ajax请求开始时触发

    5.5K20

    前端组件库_前端组件库有什么好处

    jQuery鼠标滚轮滚动侦测插件 13.2 瀑布流 Masonry Isotope – Filter & sort magical layouts 13.3 图片懒加载/加载监听 imagesLoaded...(Sticky) sticky – jQuery Plugin for Sticky Objects jquery.pin – 固定页面元素 13.16 触控事件 Hammer.js jquery.event.move.js...文档/表格 handsontable – 在线可编辑excel表格 jQuery Bootgrid – 用于ajax生成动态表格 DataTables – Table plug-in for jQuery...Video Player – PayPal 开源 HTML5 视频播放器 Clappr – 开源Web视频播放器 Plyr – A simple HTML5 media player FitVids.js...实用工具/其他插件 jquery-cookie FastClick – 处理移动端 click 事件 300 毫秒延迟 screenfull.js – 全屏切换 Async.js – 异步操作 html2canvas

    6.3K10

    java学习与应用(4.6)--过滤器、监听器、JQueryAJAX、JSON等

    通过修改代理传入参数,返回值,和方法体,进行增强和修改。 监听器 Listener监听器:注册监听:事件事件源、监听器绑定在一起。当事件源 上发生某个事件后,执行监听器代码。...使用JQuery获取元素JQuery对象(\$("#id"),\$("tag")等选择器),然后可以转换为js对象,两种对象都可以当做数组使用,方法不通用,但是前者更方便,拥有内容修改方法html等...选择器以选择元素对象:事件绑定(\$("xx").click(function(){})绑定单击事件),入口函数(\$(function(){})文档加载完毕执行代码,和onload区别如后者只能定义一次...remove方法移除元素,empty清空所有元素子元素。 其他方法见jquery手册clone方法。 JQuery动画 JQuery动画,遍历方法,事件绑定。动画使用见图片。...不加载整个网页情况下能对局部信息进行更新。

    5.4K10

    求职 | 史上最全web前端面试题汇总及答案2

    事件绑定就是针对dom元素事件绑定在dom元素上 ②普通事件即为非针对dom元素事件 27、事件委托是什么 利用事件冒泡原理,让自己所触发事件,由他父元素代替执行!...②如果使用原生javascript开发的话,会面临很多问题,浏览器兼容、Ajax数据解析、Dom、事件注册操作等都非常烦锁,而jQuery正好解决了这些问题。...③当然jQuery还有非常有用其它特性,为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展,在它基础上开发非常灵活,也有众多插件可用,jQueryUI、easyUI等。...调用append方法,新节点作为参数。 6、ajax、get、post、ajaxSetup、getJSON各有何用途? ①ajaxjQueryajax执行核心方法。...(7) 图片预加载样式表放在顶部,脚本放在底部 加上时间戳。 3、什么叫优雅降级和渐进增强?

    6.1K20

    jQuery (二)

    事件处理程序高级注册 使用bind()为添加事件 $('p').bind('click', f); p元素click事件和函数f进行绑定,需要使用闭包 还可以使用三个值,第一值为事件,第二个值为Event..., mouseout: mouseoutHandler } ) 触发事件 jquery事件处理为同步没有异步。...实时事件 实时事件为,如果先前所有a元素绑定了一个事件,接着在创建一个新a节点,如果此时触发事件,则新创建a元素不会被触发事件,因为绑定不是实时事件。...Ajax Ajax实现了不需要刷新,即可动态加载一部分页面, load 是滴,load如果传入参数为字符串,而是函数,load为事件处理程序注册,而不是ajax方法。...dataFileter 过滤或者预处理服务器返回数据 ajax事件 ajax还会在请求时候,触发相应事件 这个用于在请求某些图片时候,在图片仍旧继续下载时候,使用相应时间,提示出图片正在加载

    9.3K30

    从零开始学 Web 系列教程

    从零开始学 Web 之 DOM(五)元素创建 元素创建三种方式 其他操作元素方法 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件 为元素绑定多个事件 为元素解绑事件 从零开始学 Web...之 DOM(七)事件冒泡 什么是事件冒泡 阻止事件冒泡 小案例:为同一个元素绑定多个不同事件指向相同事件处理函数 百度搜索小项目 从零开始学 Web 之 BOM 从零开始学 Web 之 BOM(一...之 jQuery 从零开始学 Web 之 jQuery(一)jQuery概念,页面加载事件 jQuery 概念 jQuery 顶级对象 jQuery 对象和 DOM 对象互转 页面加载事件 从零开始学...,为元素绑定事件 操作元素宽和高 操作元素 left 和 top 操作元素卷曲出去之值 为元素绑定事件 从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件 为元素绑定多个相同事件...元素绑定事件区别 解绑事件 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理 事件冒泡和阻止事件冒泡 事件触发 事件参数对象 链式编程原理 从零开始学 Web 之

    4.7K50

    面试简书(五)

    倘若用户网速不给力或者此页面中图片太多时,就会发生每张图片都加载了一点但是都没有加载完成,导致最后没有一个图片能正常显示。一方面让用户体验非常之差,试问谁会一直耐心等待着页面的加载?...当切换播放视频内容时体验不是很好: 浏览器播放组件切换视频时花费时间可以明显感知。 浏览器播放组件底色一般是黑色,而我们web底色大多时候不是黑色,切换时,会出现闪动。...比如: 我们要解决弹窗被视频遮挡问题,此时我们可以视频这一节点刷新(删除后再次添加) 我们想要切换视频,就先把当前正在播放视频刷新,然后播放下一个视频。...图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片,通过jsimg标签data-src属性赋值给src属性 方案四:...2.ajax上传 ajax和FormData可实现页面无刷新文件上传效果,主要用到了jQueryajax()方法和XMLHttpRequest Level 2 FormData接口。

    1.1K10
    领券