video.js+jquery.danmu.js实现视频播放+发送弹幕
2024-06-09 05:22:38
需要自己去下载video.js和jquery.danmu.js,实在下载不到的评论找我
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><title>视频播放</title><link href="css/video-js.min.css" rel="stylesheet"><link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.js"></script><script src="js/jquery.min.js"></script><script src="js/jquery.danmu.min.js"></script><link href="css/style.css" rel="stylesheet"><link rel="stylesheet" href="css/bootstrap.min.css"><style>.m {width: 960px;height: 400px;margin-left: auto;margin-right: auto;margin-top: 1%;}video:focus {outline: none;}</style>
</head>
<body style="background-image: url('idea_background.png')"><div class="m" id="media"><p style="font-size: xx-large;height: 48px" id="mediaTitle"> </p><video width="960"id="my-player"class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"controlspreload="auto"data-setup='{}'style="border-radius:5px;border:3px solid #a5b6c8;background:#eef3f7;background-color: black"><!-- 这里的src是请求视频地址，不能是本地的，会播放不了，一定要以http请求获取 --><source id="source" src="/videoServer/m3u8/9e/4a/erke.m3u8" type="application/x-mpegURL"></source></video><div class="send_danmu_bar">弹幕 <input type="checkbox" checked='checked' name="sex" id="ishide" value='is' onchange='changehide()'class="chooseBtn"/><label for="ishide" class="choose-label"></label> <input type="textarea" id="text" max=300 style="border-radius:5px;width: 250px;color: black"/> <button type="button" class="btn btn-success" style="padding: 0 12px;background-color: #00a1d6"onclick="send()">发送</button></div>
</div>
<!--显示弹幕-->
<div id="danmu" class="flying" style="pointer-events:none;"></div>
<script>var myPlayer = videojs('my-player');var isObtain = true;myPlayer.ready(function () {var myPlayer = this;//*********************************************************************************************************************************myPlayer.src('自己的视频资源地址');
//*********************************************************************************************************************************myPlayer.play();//设置弹幕属性$("#danmu").danmu({left: $('#media').offset().left + 8,top: $('#media').offset().top + document.getElementById("mediaTitle").offsetHeight + 15,height: 500,//$("#my-player").height(),width: 950,zindex: 100,speed: 7500,opacity: 1,font_size_small: 16,font_size_big: 24,top_botton_danmu_time: 6000});var myPlayer = this;//每次播放都会进入这个函数myPlayer.on("play", function () {// $("#danmu").height($("#my-player").height() - $(".vjs-control-bar").height());//设置弹幕出发的起始位置$("#danmu").height($('#media').offset().top + 500);$("#danmu").width(950);//从服务器获取弹幕信息if(isObtain){$.get("/webDanmu/danmu/find/" , function (data) {//这个data是json数据，由后端的 list集合(里面的元素是每条弹幕消息)转过来的json数据$('#danmu').danmu("addDanmu", data);}, "json");isObtain = false;//保证只获取一次，不会应该视频的重新播放再次去获取数据，造成弹幕重复}//设置弹幕与视频同步var whereYouAt = myPlayer.currentTime();console.log(whereYouAt);$('#danmu').danmu("setTime", Math.floor(whereYouAt * 10));// $("#danmu").danmu("danmuStart");$('#danmu').danmu('danmuResume');});myPlayer.on("pause", function () {//暂停播放时，停止弹幕$('#danmu').danmu('danmuPause');});myPlayer.on("progress", function () {console.log("progress");})});//发送弹幕function send() {// var color = document.getElementById('color').value;
// var position = document.getElementById('position').value;
// var size = document.getElementById('text_size').value;var text = document.getElementById('text').value;var time = $('#danmu').data("nowTime") + 1;var color = "red";var position = "0";var size = "1";if (text != "") {$('#danmu').danmu("addDanmu",{text: text, color: color, size: size, position: position, time: time, isnew: ""});//将弹幕消息发送到后端，存到数据库中$.post("/webDanmu/danmu/send/", {text: text,color: 'while',size: size,position: position,time: time}, function (data) {}, "json");}document.getElementById('text').value = '';}function changehide() {// 通过透明度控制是否显示弹幕if (document.getElementById("ishide").checked) {jQuery('#danmu').data("opacity", 1);jQuery(".flying").css({"opacity": 1});} else {jQuery('#danmu').data("opacity", 0);jQuery(".flying").css({"opacity": 0});}}function settime() {var t = document.getElementById("set_time").value;t = parseInt(t);console.log(t);$('#danmu').data("nowtime", t);}</script>
</body>
</html>
video.js+jquery.danmu.js实现视频播放+发送弹幕相关推荐
- 弹幕调试 jquery.danmu.js
2019独角兽企业重金招聘Python工程师标准>>> 一直调试失败就是每一个弹幕的时间(time)参数没把握好,应该是 var time = $('#danmu').data(&q ...
- magento effects.js jquery.lazyload.js 冲突
2019独角兽企业重金招聘Python工程师标准>>> 当这两个js并存时,会造成加载图片闪烁的冲突问题 原因: jquery.lazyload.js会触发叫"appear ...
- ajax upload file.js,jquery.ajaxfileupload.js
jquery.ajaxfileupload.js上传插件,利用iframe提交不刷新页面功能完成. /* // jQuery Ajax File Uploader // // @author: Jor ...
- 解决：GET http://localhost:**/static/js/jquery.min.js net::ERR_ABORTED 404
解决引用jquery文件始终不起作用的相关原因 1.首先检查自己引入路径是否正确 2.确保在properties或yml中配置加载静态资源 spring.mvc.static-path-pattern ...
- Jquery实现点击页面发送弹幕效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 前端总结（html css js jQuery）
前端三剑客总结在这里插入代码片 架构模式:c/s 和 b/s (客户端/服务器 浏览器/服务器 ) 我们学的是b/s架构模式. 资源分类:动态和静态资源 动态资源需要用到数据库(不是动一动就是动态资源 ...
- jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- 基础平台项目之集成Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上 Jquery.pagination插件实现的分页功能. 本博客是基于一款正在开发中的github开源项目的,项目代码地址:https://git ...
- jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
最新文章
- zip压缩报错解决：zip warning: name not matched: xxx/xxx/xxx
- JDK源码重新编译——支持eclipse调试JDK源码--转载
- 软件工程第八次作业-2017282110249
- PHP/AJAX——登录页面与登录信息提示（非安全版本）
- Shell脚本的学习笔记一：变量
- android WebView的简单使用
- iOS9https设置info.plist
- java中 4 种取整函数
- 2018最佳GAN论文回顾（下）
- C# 8.0 的新特性概览和讲解
- 未能加载包studio package_Python包开发者的必备清单
- 要求在ASP.NET Core 2.2中确认电子邮件——第1部分
- linux6.5防火墙开端口,Linux(CentOS6.5) 开放端口，配置防火墙
- iOS平台一套完善的Crash Report解决方案
- Unity Bound
- 使用Proteus 8.9仿真STM32F103流水灯实验
- ubuntu18.04安装dash-to-dock出错的问题
- emoji表情乱码php,推送emoji表情乱码的解决方法
- 【博客8】缤果PyQt5串口调试助手V1.1(初级篇)
- 论文写作 1: 学术论文的基本概念