html5之<video>开发实现音乐播放控…

最新推荐文章于 2024-04-07 09:18:02 发布
原创 最新推荐文章于 2024-04-07 09:18:02 发布 · 858 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个简单的HTML5音乐播放器程序，演示了如何使用JavaScript来控制音频播放、暂停及从头开始播放等功能。此外，还展示了如何通过设置元素ID来定位并操作音频文件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>控制音乐播放的html5程序</title>
    <style>
        #mymusic{
            border: 1px solid red;
            width: 600px;
            height: 400px;
        }
    </style>
    <script>
        function audioPlay(){
              document.getElementByIdx_x("myaudio").play();
        }

        function goToFirst(){
            document.getElementByIdx_x("myaudio").currentTime=0;
            document.getElementByIdx_x("myaudio").play();
        }

        function audioPause(){
            document.getElementByIdx_x("myaudio").pause();
        }
    </script>
</head>
<body>
    <div id="mymusic">
        <!--
           paly()  播放
           pause()  暂停
           load()  加载
           canPlayType()  是否可以播放，不可以为空,可以maybe
           currentTime   当前播放时间
           duration    视频/音频的时长
           paused   是否暂停
           ended  是否播放到最后
           playbackRate  播放速度，2表示两倍，可以指定小数，指定数值太大时候，不能够播放声音
        -->
        <audio id="myaudio">
            <source src="video/first.ogg">
            播放音频
        </audio>
        <button onclick="audioPlay()">播放</button>
        <button onclick="goToFirst()">从头播放</button>
        <button onclick="audioPause()">暂停</button>
    </div>
</body>
</html>
HTML5中的&lt；video&gt；标签和编程概述
DevWizard的博客
10-01 89
此外，通过JavaScript，我们可以进一步操作和控制元素，实现更高级的视频交互和自定义功能。除了使用属性来控制视频的行为和外观之外，我们还可以使用JavaScript来进一步处理标签。通过JavaScript，我们可以访问元素的属性和方法，以实现更高级的交互和自定义功能。在上面的代码中，我们使用了JavaScript获取了元素，并定义了一些函数来控制视频的播放。属性外，标签还支持其他一些属性，用于控制视频的各个方面。
html5 video播放队列
qq_23858303的博客
11-10 1140
公司有个需求，就是播放音乐的时候，来了一条语音消息，需要把音乐音量调小，然后开始播放消息，但是播放消息的队列是动态的，也就是说，可能正在播消息，这时候又来了一条消息。不能中断现在播的，需要播完了再播下一条消息，消息全部播完把放音乐的音量恢复。（页面上有两个video，一个是放音乐的，一个是播消息的） 公司用的是websocket连接html5页面的，所以会实时的推送语音消息过来
html5 video移动开发一
m0_37697423的博客
12-07 6123
业务场景：微信公众号使用，通过video，取流实时浏览视频监控画面，能支持云台等一些操作，在手机上能全屏浏览并操作 视频显示位置css样式 object-fit: contain;//视频画面显示为原始比例，并且宽或高有一方铺满 object-position: left;//视频显示位置 //不显示video默认控制条controls，浏览器不同支持去掉controls的方法也不同 第一...
HTML5添加网页背景音乐
weixin_30299539的博客
05-18 2310
记录几个给网站添加背景音乐的HTML5代码，稍微总结一下 方式一：&lt;video controls="" autoplay="" name="media">&lt;source src="音乐" type="audio/mpeg">&lt;/video&gt; 　　　　这种方式会显示播放器。 方式二：&lt;embed src="music/We Don't Talk Any...
html5 &lt;字符实体,html 字符实体 大全
weixin_36462640的博客
06-05 726
往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以开头的数字。下面就是以字母或数字表示的特殊符号大全。--------------------------------------------------------------------------------´ ´ © © > >µ µ ® ® & &° ° ¡ ¡ ...
HTML5 video基础知识总结
fareise的博客
09-23 2255
一、video标签的基本属性1.autoplay=“autoplay”：规定一旦视频就绪马上开始播放2.control=“controls”：让浏览器为视频播放器提供默认的暂停、进度条等控件。如果设置了这个就不能使用自己定义的控件。3.width=“320” height=“240”：定义视频播放器的宽高。设置这个会让页面对视频播放器部分空间进行保留，入不设置一开始不会保留可能造成页面布局混乱4.
HTML5新标签兼容——> &lt;!--&lt;if lt IE 9>&lt;!endif--> 的两种方法
09-22
如果项目中已经引用了jQuery，可以使用以下JavaScript代码来创建HTML5新标签的DOM元素，以实现兼容性： ```html &lt;!-- 首先确保引入jQuery --> &lt;script src="path/to/jquery.min.js">&lt;/script> &lt;!-- 然后添加兼容...
html5 video全屏播放/自动播放的实现示例
01-21
近期开始开发公司新版官网， 首页顶部（header）是一个全屏播放的小视频, 现简单总结如下： 页面代码 &lt;?php if(!Helper::isMobile()) { ?> &lt;video id=homeVideo class=home-video autoplay loop muted ...
html5开发&lt;video&gt;视频字幕的程序
12-30 1815
<!DOCTYPE html> <html lang="en">     <meta charset="utf-8">     使用video实现实时字幕的效果             #box{             border: 1px solid red;             width: 400px;             height: 400px;            
HTML中音频视频元素的使用与控制技巧
video&gt;和&lt;audio>标签用于嵌入音频和视频内容到网页中。&lt;video&gt;标签具有内建的播放控制，如播放、暂停以及调整音量等控件，用户可以直接在网页上操作。如果浏览器不支持&lt;video&gt;标签，则可以提供...
HTML5播放音乐，视频
biggrand的博客
11-01 398
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 视频 --> <style> body{ text-align: center; } video{ width: 1000px; } </
用HTML5实现音乐播放器和视频播放器
zhuxiongxian的挨踢博客
11-04 2337
HTML5打开mp3格式的音频：(ps:使用支持HTM5的浏览器) Your browser does not support the audio element. HTML5打开mp4格式的视频： Your browser does not support the video tag.
html5中如何加入音乐文件和视频文件
qq_27032181的博客
09-11 1730
 转自  https://blog.youkuaiyun.com/xa5851477/article/details/62236913     加入视频文件的方法   &lt;video controls width="450px"height="250px" poster="images/QQ图片20170316155503.jpg"&gt;     &lt;source src="video/t...
HTML还可以放音乐，放视频（真的吗？）
最新发布
2401_84093203的博客
04-07 697
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-WZLT9gU8-1712452635481)][外链图片转存中…(img-nPde0PyQ-1712452635481)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或。
HTML5 audio与video标签实现视频播放，音频播放
weixin_34346099的博客
09-24 2654
随着互联网的飞速发展以及HTML5的应用，越来越多的项目中用到video，audio当常用标签。 audio 标签属性 &lt;audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay"&gt;亲 您的浏览器不支持html5的audio标签&lt;/audio&gt; 当然audio元素允许多个
前端基础之HTML5音视频标签（video/audio）讲解
郭育培的博客
08-13 7509
前端基础之HTML5音视频标签（video/audio）讲解
HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）
努力，追梦的博客
08-09 1894
标签属性：src：音乐的URLpreload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条 1 http://www.abc.com/test.mp3"controls> 标签属性：src：视频的URLposter：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器
HTML5的audio实现音乐的播放，暂停，音量淡入淡出
u012183426的博客
03-27 8747
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt;&lt;/style&gt; &lt;/head&amp
HTML5进化：新功能与未来趋势
通过`&lt;audio>`和`&lt;video&gt;`元素，开发者可以直接嵌入媒体内容，并提供了丰富的控件和播放选项。 5. 跨平台兼容性：尽管开发初期，各个浏览器对新特性的支持程度不一，但随着W3C和浏览器厂商的共同努力，HTML5逐渐...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值