JS控制HTML5媒体播放与暂停，及Chrome兼容的视频格式

最新推荐文章于 2024-07-25 16:22:07 发布
最新推荐文章于 2024-07-25 16:22:07 发布
阅读量1.1w 收藏 5
点赞数
分类专栏： Front-End 文章标签： html5 视频 chrome 音乐 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WRian_Ban/article/details/49487797
版权
本文介绍了如何在Chrome和微信上使用HTML5的video/audio标签播放和暂停媒体，并解决了Chrome对MP4格式的兼容性问题。通过简单的JS代码实现了动态控制播放与暂停的功能。
摘要由CSDN通过智能技术生成

嗨！嗨！嗨！嗨起来

正常播放

最近写了个小Demo，在Chrome和微信上播放视频和音乐，并通过按钮控制他们的播放和暂停。
经测试，目前Chrome和微信对 Html5的video/audio Tag支持良好。
嵌入背景音乐

<audio id="backAudio" src="h5bg2.mp3" autoplay="autoplay" preload="auto" loop="loop"></audio>

嵌入视频

<video
最低0.47元/天 解锁文章
那等雨停吧
关注
专栏目录
使用videojs实现视频播放
milijiangjun的博客
09-19 7350
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端播放m3u8格式视频</title> <title>https://blog.csdn.net/qq_30282133/article/details/81566273</title> <!-- https://blog.csd
JS控制视频播放、暂停、倍速、音量等功能
电脑高级开关机工程师的博客
06-22 4336
JS控制视频播放、暂停、倍速、音量等功能，隐藏浏览器原生视频控件。
JS实现视频播放功能
weixin_74535649
08-01 4334
视频播放功能
Javascript 实时记录视频播放进度，防止观看作弊
最新发布
qq_26631337的博客
07-25 800
上面实现了一个简单的基于原生video的具有动态颜色的进度条，可以有效地记录在视频中的观看进度。可以在上面的基础上拓展：比如原生标签用其他的播放器代替（DPlayer等），可能相应的监听时间需要做修改。比如将记录通过后台接口将记录写入在数据库，下次播放时读取记录继续播放等。
js控制视频播放
weixin_34049032的博客
05-10 2136
2019独角兽企业重金招聘Python工程师标准>>> ...
JS控制视频播放或暂停
m0_68954642的博客
06-05 3286
【代码】JS控制视频播放或暂停。
JavaScript实现视频播放器
热门推荐
小白小白从不日别的博客
11-09 1万+
最终效果： 思路/步骤： 拿到需要操作的元素 通过事件监听视频是否加载完毕 隐藏加载的动画 显示视频 获取视频的总时长 格式化获取到的时间 监听播放按钮的点击 判断当前是否处于播放/暂停状态 切换对应的图标 监听视频播放的进度 同步文本时间 同步进度条 监听进度条的点击事件 获取鼠标当前点击的位置 监听视频是否已经播放完毕 恢复播放时间 恢复图标 恢复时间 恢复进度条 恢复标记 监听全屏按钮的点击 源码： * { margin: 0; p.
Html5本地媒体文件播放器（Chrome版）
09-30
对于Chrome浏览器的兼容性，HTML5的媒体元素在现代浏览器中通常表现良好，但各个浏览器对不同编码格式的支持可能存在差异。例如，Chrome通常支持MP4（H.264编码）和WebM（VP8或VP9编码）视频格式。因此，为了确保跨...
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
09-28
在这个例子中，`id="video"`用于将来通过JavaScript访问视频元素，`controls="controls"`属性则会在视频播放器中添加播放、暂停、音量控制等标准控件。`<source>`标签用于指定视频源，这里的`src="1.mp4"`指定了视频...
播放器的方法调用，用js对播放器进行超强控制（超多调用）
03-08
播放器的方法调用，用js对播放器进行超强控制（超多调用），测试通过，绝对可以使用，下载后请自行修改代码中的音视频路径即可使用。
js实现的开源视频播放器
07-18
js实现的开源视频播放器，本人刚在项目中进行应用，感觉很不错；只支持FLV格式视频。
javascript实现简单的html5视频播放器
10-24
网页视频音频播放器大家并不陌生，在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播放器，当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天，让我们尝试用HTML5来制作网页播放器吧，毕竟无论是PC还是移动设备，HTML5是未来的趋势
html5 视频播放器 兼容谷歌
01-13
谷歌浏览器，即Chrome，支持MP4、WebM和Ogg，因此为了实现跨浏览器兼容，我们需要提供多种格式的视频源： ```html Your browser does not support the video tag. ``` 三、自定义播放器界面 虽然`<video>...
HTML5网页多媒体（ 音频，视频，旧版本浏览器提示，格式兼容，多媒体标签属性）
weixin_42235173的博客
06-04 1720
4. 网页多媒体 4.1. 音频 定义音频播放组件 <audio src="要播放的音频文件"></audio> 4.2. 视频 定义播放视频组件 <video src="要播放的视频文件"></video> 4.3. 旧版本浏览器提示 如果HTML中遇到不能识别的标签，就会将该标签当做DIV(块级元素) 那么video中的innerH...
js实现视频播放器
玉案轩窗的博客
09-23 1万+
前言之前使用js实现过音乐播放控制条，最终存在几点不如人意的地方，具体的几点如下： 1、存在拖动按钮不流畅 2、时间处理的问题，时间点在播放过程中存在重复的问题 本篇文章，采用input range以及progress来实现进度，避免在js实现音乐播放中使用offsetX来确定具体的点击的位置，使用另一种方式来解决js实现音乐播放中产生的问题。 本次实践初衷有两个： 1、js实现音乐
js实现简单的视频播放
weixin_45630548的博客
09-18 7557
功能1：播放暂停切换 思路：准备一个播放的图片和一个暂停的图片； 利用标杆思想，设置一个flag变量，播放的时候将flag设置为false，暂停的时候设置为true，如果flag为true则播放同时改变为播放图片，为false则暂停同时改变为暂停图片 功能2：进度条显示 思路：首先要获取视频播放的当前时间用currentTime()获取，还有视频的总时间，duration()来获取，用document.body.offsetWid...
js+video实现视频播放
清砾的博客
09-08 3451
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>视频案例</title> </head> <body> <video width="" height="" autoplay controls loop="loop" poster="img/lbt3_img1.jpg"> <source src="
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值