HTML5
关注
分享
扫一扫
文章平均质量分 72
视频砖家
我就是我，是颜色不一样的烟火……
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
视频播放过程中弹出问题卡片（回答正确继续观看视频）代码调用
视频弹题播放器是一种互动教学工具，通过在视频播放过程中弹出问题卡片，要求学员回答后才能继续观看。该功能可设置问题出现时间点，答错会返回重看片段，答对则继续播放。主要特点包括增强互动性、防止学员挂机、降低盗录视频的观看体验。适用于教育培训机构，能有效提升学员参与度和学习效果。原创 2025-08-06 09:53:12 · 387 阅读 · 0 评论 -
jQuery UI Tabs切换功能实例
本文介绍了使用jQuery UI实现Tabs切换功能的方法。代码示例创建了一个包含四个标签页（按钮A-D）的界面，每个标签对应不同的内容区域。通过引入jQuery UI库并调用tabs()方法实现基本切换功能。文章还提到可以通过配置选项修改默认行为，如将点击触发改为鼠标悬停，并简要讨论了自定义事件处理的可能性。该示例展示了jQuery UI在创建交互式标签页方面的简洁实现方式。原创 2025-07-30 17:51:19 · 249 阅读 · 0 评论 -
代码区域高亮highlight.js高亮代码实例（源代码）
highlight.js是一个轻量级的代码高亮工具，只需引入CSS和JS文件，通过hljs.highlightAll()方法即可实现自动高亮。使用时将代码包裹在<pre><code class="language-xxx">标签中，其中language-xxx指定编程语言类别。该工具支持自动检测语言，也可按需加载特定语言模块以优化性能。示例展示了JavaScript、Python和HTML代码的高亮效果，并提供了自定义样式的CSS代码。原创 2025-07-23 11:58:15 · 439 阅读 · 0 评论 -
Magnific Popup 图片处理插件
MagnificPopup是一款轻量高效的jQuery灯箱插件，支持图片、视频和HTML内容展示。使用步骤包括：1）引入CSS和JS文件；2）通过jQuery选择器初始化插件。支持单图展示（设置type为'image'）和图片画廊模式（启用gallery选项），通过delegate属性可批量绑定点击事件。该插件响应式设计，适合创建优雅的媒体展示效果。原创 2025-07-21 18:52:04 · 164 阅读 · 0 评论 -
保持视频二维码不变，如何更新视频内容，节省物料印刷成本
摘要： 视频替换功能可在不改变二维码、链接及代码的情况下更新视频内容，适用于营销宣传、产品手册等场景（支持多种视频格式）。用户只需上传新视频文件即可完成内容替换，无需重新印刷物料，显著降低成本。技术实现上，可通过PHP调用QRCode库生成固定二维码，同时灵活更新后端视频资源。该方案兼顾内容迭代需求与成本控制，适用于企业宣传、产品更新等高频修改场景。原创 2025-07-17 10:17:14 · 277 阅读 · 0 评论 -
移动端Html5播放器按钮变小的问题解决方法
解决手机浏览器播放器按钮过小问题的方法是在HTML的<head>中添加viewport元标签。该代码设置设备宽度为视口宽度，固定缩放比例为1并禁用用户缩放功能，确保播放器按钮在不同设备上保持合适大小。原创 2025-07-03 09:08:34 · 962 阅读 · 0 评论 -
html5视频播放器做多清晰度切换（画质切换）
HTML5视频播放器实现多清晰度切换功能，可通过两种方式：自适应流媒体（HLS/DASH）自动调整画质，或手动切换不同分辨率MP4文件。实现步骤包括：保存当前播放状态，切换视频源地址，重新加载并恢复播放时间。代码示例展示了如何通过JavaScript监听画质选择事件，动态修改<video>元素src属性，并在加载完成后恢复播放。该功能适用于需要提供多种视频质量选择的场景，如在线教育、付费课程等平台。原创 2025-06-30 17:12:05 · 1099 阅读 · 0 评论 -
Html5播放器禁止拖动播放器进度条（教学场景）
摘要：禁用视频进度条拖动功能旨在确保学员按顺序观看课程内容，防止跳过关键知识点。常见于需要完整学习的教育场景：1）防止应试作弊，确保学员真正观看而非仅完成任务；2）保证基础知识掌握，适用于编程、数学等递进式课程。文中提供了两种代码实现方式：完全禁用进度条或仅限制未播放区域拖动。该功能通过技术手段强制保障学习效果。原创 2025-06-27 11:12:01 · 893 阅读 · 1 评论 -
HTML5 Video (视频) 深入解析
它支持播放控制、视频属性设置、多源视频播放、字幕和音轨添加，以及事件监听等功能。HTML5 Video的优势包括跨平台兼容性、更好的用户体验、自适应播放、可编程性和支持多种视频格式（如MP4、WebM和Ogg）。不同浏览器对HTML5 Video的支持情况各异，建议提供多种格式的视频源以确保兼容性。原创 2025-05-21 10:01:13 · 1005 阅读 · 0 评论 -
jQuery.NiceScroll滚动条插件和中文注释
jQuery.NiceScroll滚动条插件和中文注释原创 2025-05-07 14:34:12 · 438 阅读 · 0 评论 -
PHP QR Code 库的引入代码
在你的 PHP 脚本中，使用 include 'phpqrcode/qrlib.php'; 来引入库的主文件。请确保路径是正确的，根据你将 phpqrcode 文件夹放在项目中的位置进行调整原创 2025-04-24 16:27:21 · 512 阅读 · 0 评论 -
企业员工内部培训课程如何防下载和防盗录
企业内训培训课程如何防下载和防盗录？上实例效果，有兴趣的朋友也可以直接输入自己的名字测试哦~做的演示DEMO如下，实现了“企业员工ID跑马灯”和“视频随机员工ID水印”，做了PC端和移动端的适配。原创 2025-04-24 14:32:50 · 931 阅读 · 0 评论 -
视频播放器中视频内容禁止拖动观看播放器禁止拖拽
HTML5播放器调用范例说明：视频播放器中视频内容禁止拖动观看,播放器禁止拖拽,播放器彻底禁止拖拽功能,用户需完整观看内容,不能拖动。原创 2025-04-24 09:24:33 · 434 阅读 · 0 评论 -
谷歌浏览器基于WEB环境自动播放视频问题的解决方案
说到底，这是谷歌浏览器没有遵守HTML5标准的video标签引起的问题，好吧，处理有点难原创 2025-04-20 23:07:49 · 1815 阅读 · 0 评论 -
将视频生成视频二维码的流程介绍
您需要将您的视频上传到视频托管平台，例如优酷或您自己的服务器，如果自己没有服务器，也可以上传到酷播云平台，这里可以直接存储和生成二维码原创 2025-04-20 06:36:51 · 427 阅读 · 0 评论 -
HTML5企业网站如何添加视频？附三种教程方法！
HTML5企业网站如何添加视频？附三种教程方法！自定义视频播放的开始/结束时间，播放器支持通过参数来指定视频开始/结束播放的时间点。原创 2025-02-14 10:03:24 · 1621 阅读 · 0 评论 -
图表可视化-大模型时代下的生成式BI
平台支持直连多种数据源（MySQL、SQL Server、PostgreSQL、Oracle、DB2、GBase、GreenPlum、Presto、Kylin、Hive、Spark SQL、Impala、Clickhouse 等等），还可以通过 API、静态 JSON 方式绑定可视化图表的数据，简单灵活。原创 2025-01-14 10:55:20 · 739 阅读 · 0 评论 -
使用jQuery来实现手机号码验证的HTML5页面示例
使用jQuery来实现手机号码验证的HTML5页面示例.DOM加载完成后绑定事件：使用$(document).ready()确保DOM完全加载后再绑定事件处理器。原创 2024-12-04 09:44:51 · 385 阅读 · 0 评论 -
Element-ui官方示例（Popover 弹出框）
Element-ui官方示例（Popover 弹出框）我们为新版的 vue-cli 准备了相应的Element 插件，你可以用它们快速地搭建一个基于 Element 的项目。原创 2024-10-14 15:38:59 · 973 阅读 · 0 评论 -
Bootstrap文件介绍与它的整体架构介绍
Bootstrap文件介绍与它的整体架构介绍，bootstrap框架中除了Css组件和JavaScript插件外，另外四部分都是基础支撑平台。原创 2024-10-11 09:08:31 · 887 阅读 · 0 评论 -
BootStrap组件class根据不同设备设定显示与隐藏
如需在给定的屏幕尺寸范围内显示某个页面元素的话，可以将一个 .d-*-none 类和一个 .d-*-* 类联合使用，例如，.d-none .d-md-block .d-xl-none .d-xxl-none 的效果是：在中等尺寸（medium）和大尺寸（large）的屏幕上显示指定的页面元素原创 2024-10-11 08:54:21 · 637 阅读 · 0 评论 -
惊艳，这个html5播放器支持视频切换、倍速切换、视频预览
初始化播放器、播放器尺寸设置、视频切换、倍速切换、视频预览、自定义视频播放的开始/结束时间、禁止拖拽进度、播放器皮肤、控件按钮以及播放控制等原创 2023-10-26 10:23:36 · 1768 阅读 · 1 评论 -
html5播放器设置音量的方式实例源代码
方式1：html5播放器设置音量的方式实例源代码。方式2：酷播云html5播放器代码实例原创 2023-05-08 01:24:29 · 1186 阅读 · 0 评论 -
html5中的meta标签用法详解
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。html5中的meta标签主要用于描述网页的元数据，它可以用于描述网页的标题、关键词、描述、作者、版权等信息，还可以用于设置网页的字符集、设置网页的刷新时间、设置网页的跳转页面等。原创 2023-02-21 09:39:27 · 3490 阅读 · 0 评论 -
html5视频播放的实例（playbackRate属性）
html5视频倍数播放的实例（playbackRate属性）原创 2022-08-03 18:48:59 · 68 阅读 · 0 评论 -
视频预览播放器与JS之间交互
视频预览播放器与JS之间交互原创 2021-12-23 09:08:02 · 283 阅读 · 0 评论 -
酷播云H5播放器自动播放与循环播放
酷播云H5播放器自动播放与循环播放，播放器自动播放与循环播放，说明：html5的自动播放与循环播放，各浏览器的支持并不一致，存在部分浏览器不支持的情况。原创 2021-12-02 10:07:31 · 523 阅读 · 0 评论 -
基于OBS如何实现毫秒级超低延时直播
原创教程 / 2021-11-16 / 文章字数2300文章简述：本文介绍使用OBS无延迟直播插件在第三方云平台，如何实现超低延时直播的完整教程（延迟约为400毫秒，通常延迟是3-15秒）。OBS简要介绍OBS（Open Broadcaster Software）是一款免费开源的视频录制和视频直播推流软件，功能非常强大，在做视频直播时经常会用到，支持Windows, Mac以及Linux等不同平台。基于OBS，可以很方便的实现摄像机采集卡画面、桌面、文档、多媒体等不同形式的画面采集和输出。原创 2021-11-16 10:22:43 · 4285 阅读 · 1 评论 -
一款HTML5网页播放器全功能版的界面
我的热门文章推荐多路视频直播用在线云导播切换的效果测试 如何把视频转换生成二维码，扫码直接播放？ 有哪些网站上传视频是不会插入广告的？ 怎么把视频生成二维码？微信扫二维码就可以观看？不要广告的 常用照片尺寸对照表，照片大小看这个表就对了 视频直播推流攻略（整理的各大平台推流界面） html5视频倍速播放功能 教你一招：多个视频如何实现列表播放？ 微信公众号如何实现视频列表播放视频的功能 h5视频倍速播放功能(视频多倍速观看功能的实例) 怎样配置FTP服务器 如何使用...原创 2021-11-04 09:49:33 · 232 阅读 · 0 评论 -
php程序如何删除文件夹和文件
<?php function deleteDir($dir) { if (!$handle = @opendir($dir)) { return false; } while (false !== ($file = readdir($handle))) { if ($file !== "." && $file !== "..") { //排除当前目录与父级目录.原创 2021-10-21 16:21:43 · 447 阅读 · 0 评论 -
视频html5播放器代码实例
视频html5播放器代码实例<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">*{margin: 0;padding: 0;list-style: none;} .outerNode{width: 540px;height: 332px;posit.原创 2021-10-20 12:21:26 · 3424 阅读 · 1 评论 -
html5视频源文件播放教程
源文件播放，是指视频上传到源文件播放属性的目录中，平台不对上传到该目录下的文件进行重新编码，而直接以其上传的文件，进行播放。注：用户必须上传标准mp4格式的文件，暂不支持其他格式。STEP1图1：源文件播放教程STEP2图2：源文件播放教程STEP3图3：源文件播放教程我的热门文章推荐多路视频直播用在线云导播切换的效果测试 如何把视频转换生成二维码，扫码直接播放？ 有哪些网站上传视频是不会插入广告的？ 怎么把视频生成二维码？微信扫二维码..原创 2021-10-20 12:18:36 · 913 阅读 · 0 评论 -
html5实现视频倍速播放代码示例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>阿酷TONY--Tangni</title></head><body><div style="text-align:center"> <button οnclick="playPause()">播放/暂停</button> <button.原创 2021-09-16 11:58:27 · 2225 阅读 · 0 评论 -
腾讯云播放器 Demo与调用方法
Web 端播放器支持 PC 端和移动端的浏览器视频播放，丰富灵活的接口可帮助用户快速与自有 Web 应用集成。针对超级播放器的基础播放和点播播放两种播放模式，腾讯云分别提供了其对应的 Web 端视频播放器，您可根据自身需求进行体验。腾讯云播放器 Demo与调用方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-.原创 2021-09-10 15:10:31 · 1371 阅读 · 0 评论 -
如何禁止html标签video标签自动全屏播放
如何禁止html标签video标签自动全屏播放<video loop onClick="javascript:clickVideo();" ><source src="" type="video/webm"></video>我的热门文章推荐多路视频直播用在线云导播切换的效果测试 如何把视频转换生成二维码，扫码直接播放？ 有哪些网站上传视频是不会插入广告的？ 怎么把视频生成二维码？微信扫二维码就可以观看？不要广告的 常用照片尺寸对照表，.原创 2021-09-08 14:48:54 · 756 阅读 · 0 评论 -
html5视频播放器带ID跑马灯效果（视频防录屏）
通过接口配置获取观看者信息，将观看者信息随机显示于视频播放界面（可自定义位置、时间、时长、及颜色等），在不影响观看体验的同时，让视频具备指纹信息。ID跑马灯可快速追踪被盗视频出处，方便第一时间对录屏者进行举报封号，并为法律途径起诉保留证据。在震慑盗版者的同时，也这样可以大大的增加盗版者的录屏成本，同时还能够强力的震慑盗版者。应用场景：html5视频播放器带ID跑马灯常可以用在教育机构、企业视频教学中做防录屏的保护。例如以下演示截图ID显示是：ID-TONY-2021-2-25-TEL-1350.原创 2021-07-29 16:27:01 · 2051 阅读 · 0 评论 -
视频存储与公众号中播放的解决方案（直接调用代码或公众号调用视频地址）
企业视频产品宣传片的制作，有利于企业形象的树立，还可以得到公众的信赖，为企业营销做直观形象的铺垫。企业宣传片作为企业的工具，集合视听语言于一身，可以从听觉和视觉两个方面来展示企业和产品。这种本身的直观性，比较与传统单一的营销方式相比更具优势。第1种应用方式：纯H5播放器代码应用<div id="player"></div><script src="//player.polyv.net/script/player.js"></script>..原创 2021-07-29 16:03:43 · 1365 阅读 · 0 评论 -
企业微信公众号如何调用视频列表(视频专辑)
有公众号的朋友，看过来，今天来教教大家，在企业微信公众号中如何调用视频列表。先上一个效果吧：最终效果的截图-关注酷播公众号，查看实际的应用效果（在本公众号中，点开 [功能应用 > 视频专辑演示] 查看）STEP1注册帐号参考如下( 图1-1 )，按照提示填入您的注册信息，再点击下方的"注册"按钮，完成酷播云用户帐号的注册。1. 如果您没有帐号，可点此注册。2. 如果您已帐号，可点此登录图1-1：注册帐号图1-2：帐号登录STEP2上传视频...原创 2021-07-21 18:21:35 · 1715 阅读 · 1 评论 -
HTML5播放器调用(功能效果)
播放器参数说明：参数 类型 默认值 说明 应用 wrap string / HTMLElement - 页面上存在需要载入播放器的DOM元素或css选择器 width number / string 100% 播放器的宽度 height number / string auto 播放器的高度 vid string - 从 polyv 后台上传的视频会生成一个视频唯一..原创 2021-06-25 15:39:54 · 1284 阅读 · 1 评论 -
禁止视频在手机移动端页面中全屏播放代码范例
禁止视频在手机移动端页面中全屏播放代码范例<video controls autoplay loop preload="auto" poster="img/popup-img.png" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-air...原创 2020-12-22 23:10:35 · 609 阅读 · 0 评论