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

最新推荐文章于 2021-06-05 08:42:30 发布
最新推荐文章于 2021-06-05 08:42:30 发布
阅读量832 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baohanqing/article/details/17688669
版权
<!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 οnclick="audioPlay()">播放</button>
        <button οnclick="goToFirst()">从头播放</button>
        <button οnclick="audioPause()">暂停</button>
    </div>
</body>
</html>
战略观察者
关注
专栏目录
HTML5中的&lt；video&gt；标签和编程概述
DevWizard的博客
10-01 44
此外，通过JavaScript，我们可以进一步操作和控制元素，实现更高级的视频交互和自定义功能。除了使用属性来控制视频的行为和外观之外，我们还可以使用JavaScript来进一步处理标签。通过JavaScript，我们可以访问元素的属性和方法，以实现更高级的交互和自定义功能。在上面的代码中，我们使用了JavaScript获取了元素，并定义了一些函数来控制视频的播放。属性外，标签还支持其他一些属性，用于控制视频的各个方面。
HTML5播放音频&视频
CQcaoqian的博客
05-17 878
HTML5方法 video元素播放视频、audio元素播放音频 1.audio语法 &lt; audio src="音频路径"&gt; &lt;/ audio &gt; 属性 值 说明 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放 [自动播放]，谷歌浏览器不支持，用户需自己点击 loop loop 如果出现该属性，则当音频结束时
html5 video播放队列
qq_23858303的博客
11-10 1069
公司有个需求，就是播放音乐的时候，来了一条语音消息，需要把音乐音量调小，然后开始播放消息，但是播放消息的队列是动态的，也就是说，可能正在播消息，这时候又来了一条消息。不能中断现在播的，需要播完了再播下一条消息，消息全部播完把放音乐的音量恢复。（页面上有两个video，一个是放音乐的，一个是播消息的） 公司用的是websocket连接html5页面的，所以会实时的推送语音消息过来
html5 video移动开发一
m0_37697423的博客
12-07 6071
业务场景：微信公众号使用，通过video，取流实时浏览视频监控画面，能支持云台等一些操作，在手机上能全屏浏览并操作 视频显示位置css样式 object-fit: contain;//视频画面显示为原始比例，并且宽或高有一方铺满 object-position: left;//视频显示位置 //不显示video默认控制条controls，浏览器不同支持去掉controls的方法也不同 第一...
HTML5添加网页背景音乐
weixin_30299539的博客
05-18 2233
记录几个给网站添加背景音乐的HTML5代码，稍微总结一下 方式一：&lt;video controls="" autoplay="" name="media"&gt;&lt;source src="音乐" type="audio/mpeg"&gt;&lt;/video&gt; 　　　　这种方式会显示播放器。 方式二：&lt;embed src="music/We Don't Talk Any...
html5 &lt;字符实体,html 字符实体 大全
weixin_36462640的博客
06-05 656
往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以开头的数字。下面就是以字母或数字表示的特殊符号大全。--------------------------------------------------------------------------------´ ´ © © &gt; &gt;µ µ ® ® & &° ° ¡ ¡ ...
HTML5 video基础知识总结
fareise的博客
09-23 2214
一、video标签的基本属性1.autoplay=“autoplay”：规定一旦视频就绪马上开始播放2.control=“controls”：让浏览器为视频播放器提供默认的暂停、进度条等控件。如果设置了这个就不能使用自己定义的控件。3.width=“320” height=“240”：定义视频播放器的宽高。设置这个会让页面对视频播放器部分空间进行保留，入不设置一开始不会保留可能造成页面布局混乱4.
HTML5新标签兼容——&gt; &lt;!--&lt;if lt IE 9&gt;&lt;!endif--&gt; 的两种方法
09-22
如果项目中已经引用了jQuery，可以使用以下JavaScript代码来创建HTML5新标签的DOM元素，以实现兼容性： ```html &lt;!-- 首先确保引入jQuery --&gt; &lt;script src="path/to/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- 然后添加兼容...
html5 video全屏播放/自动播放的实现示例
01-21
近期开始开发公司新版官网， 首页顶部（header）是一个全屏播放的小视频, 现简单总结如下： 页面代码 &lt;?php if(!Helper::isMobile()) { ?&gt; &lt;video id=homeVideo class=home-video autoplay loop muted ...
html5开发&lt;video&gt;视频字幕的程序
12-30 1769
<!DOCTYPE html> <html lang="en">     <meta charset="utf-8">     使用video实现实时字幕的效果             #box{             border: 1px solid red;             width: 400px;             height: 400px;            
HTML5播放音乐，视频
biggrand的博客
11-01 373
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 视频 --> <style> body{ text-align: center; } video{ width: 1000px; } </
用HTML5实现音乐播放器和视频播放器
zhuxiongxian的挨踢博客
11-04 2220
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 1705
 转自  https://blog.csdn.net/xa5851477/article/details/62236913     加入视频文件的方法   &lt;video controls width="450px"height="250px" poster="images/QQ图片20170316155503.jpg"&gt;     &lt;source src="video/t...
HTML5 audio与video标签实现视频播放，音频播放
weixin_34346099的博客
09-24 2609
随着互联网的飞速发展以及HTML5的应用，越来越多的项目中用到video，audio当常用标签。 audio 标签属性 &lt;audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay"&gt;亲 您的浏览器不支持html5的audio标签&lt;/audio&gt; 当然audio元素允许多个
HTML5页面播放音乐及audio功能使用
u010115014的博客
09-18 7573
&lt;audio src=”音频的地址”&gt;备用（当浏览器不支持audio时显示的内容）&lt;/audio&gt; 控制函数功能说明 load()   加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载 play()    加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放 pause() 暂停处于播放状态的音频、视频文件 audio...
前端基础之HTML5音视频标签（video/audio）讲解
郭育培的博客
08-13 7248
前端基础之HTML5音视频标签（video/audio）讲解
HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）
努力，追梦的博客
08-09 1851
标签属性：src：音乐的URLpreload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条 1 http://www.abc.com/test.mp3"controls> 标签属性：src：视频的URLposter：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器
HTML5的audio实现音乐的播放，暂停，音量淡入淡出
u012183426的博客
03-27 8501
&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&gt;`和`&lt;video&gt;`元素，开发者可以直接嵌入媒体内容，并提供了丰富的控件和播放选项。 5. 跨平台兼容性：尽管开发初期，各个浏览器对新特性的支持程度不一，但随着W3C和浏览器厂商的共同努力，HTML5逐渐...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值