javascript实现视频弹幕效果(两个版本)_javascript技巧

来源:脚本之家  责任编辑:小易  

现在有很多的人在教授这种课程,我也是这样学会的,成为现在的我!可以去我个人WZ看看,有兴趣去看看我的主页:互联网点人(全拼,限制原因发不了请理解)www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了javascript实现视频弹幕效果的具体代码,供大家参考,具体内容如下

这个不用视频教程这么麻烦的。网上很多弹出层插件,比如artdilog,很好用的,直接下载就好了

基础版本

补充一种做法并不使用contains,而是利用事件冒泡。在出现弹窗(是指同一页面的浮层吧?的同时,给document绑定点击事件,在事件处理函数内关闭这个弹窗。然后,也给这个弹窗元素绑定一个点击

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color: blue; margin: 0 auto; } .box { height: 500px; background-color: #000; position: relative; overflow: hidden; } video { width: 100%; height: 100%; } .info { text-align: center; margin-top: 20px; } input[type=text] { width: 500px; height: 50px; } input[type=button] { height: 50px; width: 100px; } span { position: absolute; /* 文本强制不换行 */ white-space: nowrap; font: bold 18px '微软雅黑'; } </style></head><body> <div class="dm"> <div class="box"> <video src="m.mp4" controls></video> </div> <div class="info"> <input type="text" maxlength="30" id="txt"> <input type="button" value="发射" id="emit"> </div> </div> <script src="jquery-1.12.4.js"></script> <script> // 0. 用一个数组保存一组颜色值 var colors = ['red', 'green', 'yellow', '#fff', 'pink', 'blue']; // 1. 给发射按钮注册点击事件 $('#emit').click(function () { // 2. 获取文本框的内容 var v = $('#txt').val(); // 3. 创建span标签,并设置内容,设置样式,最后追加到类名为box的div中 var $span = $('<span></span>'); $span.text(v) .css({ left: $('.box').width(), top: parseInt(Math.random() * $('.box').height()), color: colors[parseInt(Math.random() * colors.length)] }).appendTo('.box'); // 4. 让当前的span产生动画 left 为-span的宽度 $span.animate({ left: -1 * $span.width() }, 6000, 'linear', function () { // 当动画结束后,删除该元素 $span.remove(); }) }); </script></body></html>

用js只能实现替换图片,不能实现按钮弹起。不过,如果你换的图片和本来的图片相比,有一种弹起效果,那就是了。

加强版本

这个没有搞过,但是可以给个思路:在页面上添加下面的js试试,即把js自己的alert、confirm、prompt给覆盖掉。var alert=function(){return 1} var confirm=function(){return 1} var prompt=

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color: blue; margin: 0 auto; } .box { height: 500px; background-color: #000; position: relative; overflow: hidden; } video { width: 100%; height: 100%; } .info { text-align: center; margin-top: 20px; } input[type=text] { width: 500px; height: 50px; } input[type=button] { height: 50px; width: 100px; } span { position: absolute; /* 文本强制不换行 */ white-space: nowrap; font: bold 18px '微软雅黑'; } </style></head><body> <div class="dm"> <div class="box"> <!-- controls 如果出现该属性,则向用户显示控件,比如播放按钮。 --> <video src="m.mp4" controls></video> </div> <div class="info"> <input type="radio" value="" id="ban" name="1">精简</input> <input type="radio" value="" id="vip" name="1">VIP尊享</input> <input type="text" maxlength="30" id="txt"> <input type="button" value="发射" id="emit"> </div> </div> <script src="jquery-1.12.4.js"></script> <script> // 0. 用一个数组保存一组颜色值 var colors = ['red', 'green', 'yellow', '#fff', 'pink', 'blue']; //定义一个变量,定义其他样式的 b = 0 $('#ban').click(function () { b = 1; }); $('#vip').click(function () { b = 2; }); // 1. 给发射按钮注册点击事件 $('#emit').click(function () { // 2. 获取文本框的内容 var v = $('#txt').val(); // 3. 创建span标签,并设置内容,设置样式,最后追加到类名为box的div中 var $span = $('<span></span>'); //定义CSS样式,让它是一个数组形式表现 css = [{ "left": $('.box').width(), "top": parseInt(Math.random() * $('.box').height()), "color": colors[parseInt(Math.random() * colors.length)] }, { "left": $('.box').width(), "top": parseInt(Math.random() * ($('.box').height() / 2)), "color": colors[parseInt(Math.random() * colors.length)] }, { "left": $('.box').width(), "top": parseInt(Math.random() * $('.box').height()), "color": "yellow", "fontSize": 50, "fontFamily": "楷体" } ] //看看能不能打印出数组中的东西 // console.log(abc[1]) $span.text(v) .css(css[b]) .appendTo('.box'); // 4. 让当前的span产生动画 left 为-span的宽度 //打印出文本长度 // console.log(v.length) $span.animate({ left: -1 * $span.width() }, (30 - v.length) * 333, 'linear', function () { // 当动画结束后,删除该元素 $span.remove(); }) }); </script></body></html>

javascript是一种脚本语言,可以嵌入网页中中运行。下面是一个最简单的弹窗操作,请把下面的代码复制到你的页面中任何位置: javascript\"> window.open(\"#\");其中#代表当前页,你也

你搜一下百度应该能搜到IE不支持embed src的实时更新,通过dom修改src是无法更新视频的。那目前只有尝试重写整个embed的估计就可以更新视频了,也只有这一条路了,不过很好,目标实现。这是我的代码12345 function start(str){ var t=document.getElementById("emb").outerHTML;document.getElementById("emb").outerHTML=t.replace(/\\s+src\\s*=\\s*\\S+\\s+,' src="'+str+'"');}通过正则将src的地址替换掉,使用outerHTML替换整个目标元素,就能更新了。使用正则主要是方便,如果你的embed简单,你当然可以不用正则,直接手写拼出结构,如果有错,请指出,希望可以共同学习内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js实现的视频弹幕效果示例
  • javascript实现弹幕墙效果
  • 利用js代码自动删除稿件的普通弹幕功能
  • 基于javascript实现弹幕特效
  • 简单实现javascript弹幕效果
  • javascript直播评论发弹幕切图功能点集合效果代码
  • jquery实现直播弹幕效果
  • 简单实现jquery弹幕效果
  • jquery实现弹幕效果
  • 基于jquery实现弹幕app
  • js表单中选择框值的获取及表单的序列化
  • 原生javascript实现图片延时加载的方法
  • javascript实现函数柯里化与反柯里化过程解析
  • layui表格内容溢出的解决方法
  • canvas 实现中国象棋
  • webpack本地开发环境无法用ip访问的解决方法
  • 利用javascript对中文(汉字)进行排序实例详解
  • javascript自动恢复文本框点击清除后的默认文本
  • javascript阻止scroll事件多次执行的思路及实现
  • 用js限制网页只在微信浏览器中打开(或者只能手机端访问)
  • HTML+JavaScript 实现切换视频功能
  • JavaScript视频
  • HTML中如何用DIV CSS javascript模拟实现模态窗口的弹出?
  • javascript 打开一个弹出层怎么实现的
  • 求一个JavaScript制作弹出式登录框的视频教程
  • 如何使用JavaScript(非jQuery)实现点击页面空白后关闭弹窗?
  • javascript如何实现按钮弹起效果
  • 怎么用JavaScript实现自动点击由confirm弹出的对话框中的“确定”按钮?
  • javascript如何实现弹出窗口
  • 网页设计用javascript实现弹出对话框的一个示例
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧js实现的视频弹幕效果示例javascript实现弹幕墙效果利用js代码自动删除稿件的普通弹幕功能基于javascript实现弹幕特效简单实现javascript弹幕效果javascript直播评论发弹幕切图功能点集合效果代码jquery实现直播弹幕效果简单实现jquery弹幕效果jquery实现弹幕效果基于jquery实现弹幕appjs表单中选择框值的获取及表单的序列化原生javascript实现图片延时加载的方法javascript实现函数柯里化与反柯里化过程解析layui表格内容溢出的解决方法canvas 实现中国象棋webpack本地开发环境无法用ip访问的解决方法利用javascript对中文(汉字)进行排序实例详解javascript自动恢复文本框点击清除后的默认文本javascript阻止scroll事件多次执行的思路及实现用js限制网页只在微信浏览器中打开(或者只能手机端访问)js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法原生js实现点击轮播切换图片bootstrap table实现x-editable的行单元格利用js实现在浏览器状态栏显示访问者在本react native中navigator的使用方法示例对layui中表单元素的使用详解关于递归运算的顺序测试代码js实现用于建立新的一行且增加的四个文本文本框倒叙输入让输入框的焦点始终在最开javascript实现检验的各种规则jsp跨iframe如何传递参数实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved