video标签 - 低调共享者

解决HTML5 video不支持播放m3u8格式视频的方法

m3u8是一种基于HLS(HTTP Live Streaming)文件视频格式，HLS由苹果公司提出，使用<video></video>标签可以在Safari浏览器直接播放，但其它浏览器要借助hls.js或基于hls.js开发的html5播放器插件才能兼容播放m3u8格式视频，否则会提示不支持视频格式。基础代码 HTML代码： <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <video id="video1" co...

2024-1-3/ 2323 次浏览/ Web前端开发

简易HTML5 video点击元素弹框播放视频的jQuery代码

很简单的点击指定元素弹出层播放video视频的代码，如果不喜欢很炫酷的弹框视频效果可以一用。 CSS代码： .popup{position:fixed;left:0;top:0;width:100%;height:100%;overflow-y:auto;background-color:rgba(0,0,0,0.75);z-index:10;-webkit-overflow-scrolling:touch;display:none;} .popup .video{width:100%;min-height:100%;justify-content:center;al...

2023-11-22/ 1572 次浏览/ Web前端开发

javascript获取video视频某一帧作为poster封面图片

HTML标签Video的poster属性可以给视频添加一个图片作为视频未开始播放时的封面，但如果不想单独添加图片，也可以通过代码利于canvas获取视频的某一帧作为封面图片。 HTML代码： <video id="cvideo" src="upload/video.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscree...

2023-8-9/ 1227 次浏览/ Web前端开发

slick.js插件实现监听video视频播放结束再自动轮播的代码

slick.js是常用的轮播图插件，监听video视频播放是常用的轮播模块效果。和SuperSlide.js插件、Swiper插件实现当前焦点有视频就暂停自动轮播，等视频播放结束再继续自动轮播的实现原理基本一样，就是先判断当前焦点是否有视频，如果有视频就调用暂停轮播的插件方法，使用addEventListener监听视频是否播放结束，然后再调用启用轮播的插件方法和立即播放下一屏的插件方法。使用到的slick.js插件方法有：slickPause、slickPlay、slickNext；使用到的slick.js插件回调函数有：afterChange；使用到的js事件有：end...

2023-3-9/ 1235 次浏览/ Web前端开发

javascript判断视频音频是否播放结束的代码

HTML DOM ended 事件在 HTML video（视频）或 audio（音频）播放完成后触发，因此通过监听 ended 事件就可以判断视频或音频是否已经播放完在，然后执行其它操作。以下代码支持IE9+浏览器。如果是音频则把 HTML 代码改成 audio 标签的内容即可。 HTML代码： <video id="video1" src="upload/video.mp4" poster="upload/poster.jpg" webkit-playsinline="true" playsinline="tr...

2021-7-21/ 6221 次浏览/ Web前端开发

自定义HTML5 video标签视频播放器的皮肤样式

HTML5 视频标签 video 在不同浏览器会有不同的控件样式，想要统一 video 视频控件的样式，可以利用 HTML5 Video 的 Api，用 JavaScript 访问 html video api，将其作为控制视频的媒介，就可以实现 video 视频控件皮肤样式的自定义。 jQuery 是如何获取 video 标签的（基础可以跳过）在原生 javaScript 中使用 getElementById('videoID') 获取 video 标签会得到一个 Dom 对象，在 jQuery 中使用 $("videoID") 会返回一个 jQ...

2021-7-9/ 4580 次浏览/ Web前端开发

HTML5 video标签属性controlslist禁止下载、全屏和远程播放

video标签controlslist属性的作用是帮助用户使用控制属性controls时选择要在媒体元素上显示的控件，controlslist属性有nodownload（隐藏下载控件）、nofullscreen（隐藏全屏模式控件）、noremoteplayback（隐藏远程播放控件）三个属性值，可同时设置三个值或其中一个。目前支持该属性的PC和手机浏览器有：Chrome 58+、Opera 45+、Android webview、Chrome for Android、Firefox for Android、Opera for Android。用法： &l...

2021-4-9/ 10063 次浏览/ Web前端开发

HTML video标签视频关闭画中画控件按钮

HTML5 标签 video 在网页中插入播放视频，默认会出现画中画按钮控件，webkit 内核的浏览器（chrome）可以使用 video 新增的 disablePictureInPicture 属性关闭， firefox 浏览器目前不支持 disablePictureInPicture 属性，暂时也没有在代码层面关闭画中画的方法，需要在浏览器本身的设置里关闭，而IE浏览器压根就不支持画中画，不用考虑。 webkit内核浏览器关闭画中画 <video src="video.mp4" width="500px" height="400px" controls di...

2021-4-1/ 6757 次浏览/ Web前端开发

javascript实现HTML5 video视频播放暂停的简易代码

HTML标签video不使用control参数，通过自定义按钮实现视频播放暂停的代码，比较简单，适合只要播放暂停效果的需求。支持IE9+、手机浏览器。 javascript代码 function videoBtn(type, videoId, btnId){ if(type == 'play'){ var video = document.getElementById(videoId); var btn = document.getElementById(btnId); video.play(); btn.style.disp...

2021-1-15/ 4054 次浏览/