H5播放音频和视频：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>音乐在线试听</title>

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta http-equiv="Cache-Control" content="no-transform">

    <meta http-equiv="Cache-Control" content="no-siteapp">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <meta name="keywords" content="音乐搜索,音乐搜索器,音乐试听,音乐在线听,网易云音乐,QQ音乐,酷狗音乐,酷我音乐,百度音乐,一听音乐,咪咕音乐,荔枝FM,蜻蜓FM,喜马拉雅FM,全民K歌,5sing原创翻唱音乐">

    <meta name="description" content="刘志进特制多站合一音乐搜索解决方案，可搜索试听网易云音乐、QQ音乐、酷狗音乐、酷我音乐、百度音乐、一听音乐、咪咕音乐、荔枝FM、蜻蜓FM、喜马拉雅FM、全民K歌、5sing原创翻唱音乐。">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="apple-mobile-web-app-title" content="音乐搜索器">

    <meta name="application-name" content="音乐搜索器">

    <meta name="format-detection" content="telephone=no">

</head>

<body>

	  <audio src="http://fsmvpc.ali.kugou.com/202407101058/893b316b9d7a8a54fbc72869bfd30cef/KGTX/CLTX002/d1295061d33af12cd19ecd7e7ba5a48c.mp4" controls="controls" loop="loop" autoplay="autoplay"></audio>

	　<video width="750" height="300" id="videoP" src="http://fsmvpc.ali.kugou.com/202407101058/893b316b9d7a8a54fbc72869bfd30cef/KGTX/CLTX002/d1295061d33af12cd19ecd7e7ba5a48c.mp4"></video>

	<script>

		var Media = document.getElementById("videoP");

		 function eventTester(e){

		    Media.addEventListener(e,function(){

		     console.log((new Date()).getTime(),e);

		     });

		  }

		eventTester("loadstart");       //客户端开始请求数据

		eventTester("progress");        //客户端正在请求数据

		eventTester("suspend");         //延迟下载

		eventTester("abort");           //客户端主动终止下载（不是因为错误引起），

		eventTester("error");           //请求数据时遇到错误

		eventTester("stalled");         //网速失速

		eventTester("play");            //play()和autoplay开始播放时触发

		eventTester("pause");           //pause()触发

		eventTester("loadedmetadata");  //成功获取资源长度

		eventTester("loadeddata");      //提示当前帧的数据是可用的

		eventTester("waiting");         //等待数据，并非错误

		eventTester("playing");         //开始回放

		eventTester("canplay");         //可以播放，但中途可能因为加载而暂停

		eventTester("canplaythrough");  //可以播放，歌曲全部加载完毕

		eventTester("seeking");         //寻找中

		eventTester("seeked");          //寻找完毕

		eventTester("timeupdate");      //播放时间改变

		eventTester("ended");           //播放结束

		eventTester("ratechange");      //播放速率改变

		eventTester("durationchange");  //资源长度改变

		eventTester("volumechange");    //音量改变

	</script>

</body>

</html>

　　

参考：https://segmentfault.com/a/1190000003793988?utm_source=tuicool

H5播放音频和视频的更多相关文章

  1. 解决ubuntu下firefox无法在线播放音频和视频的问题

    原因 Ubuntu 为了规避专利和版权问题,很多东西没有预装,比如音视频解码器AAC. 那么为什么明明 Ubuntu 上没有AAC解码器, Chrome 却可以正常播放呢,自然的想法是 Chrome ...

  2. 网页上播放音频、视频Mp3，Mp4

    昨天在处理网页上播放音频mp3,视频mp4上用了一天的时间来比较各种方案,最终还是选择了HTML5的 标签,谷歌浏览器.IE浏览器对标签的支持都很好,火狐上需要安装quicktime插件,效果比较差. ...

  3. Android学习总结（十六） ———— MediaPlayer播放音频与视频

    一.基本概念 本文主要介绍的是Android中很重要也最为复杂的媒体播放器(MediaPlayer)部分的架构.Android的MediaPlayer包含了Audio和video的播放功能,在Andr ...

  4. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  5. 关于iphone自动播放音频和视频问题的解决办法

    大家都知道 做移动端 会遇到音频和视频无法自动播放问题(我也遇到了)于是想办法解决这个问题 我只是找到了在微信中解决的办法(如果谁有在别的浏览器有这个办法  请私聊我 )我是没有发现 document ...

  6. HTML5使用jplayer播放音频、视频

    首先推上神器 jPlayer:基于HTML5/Flash的音频.视频播放器 jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto ...

  7. 网页播放音频、视频文件——基于web的html 5的音乐播放器（转载）

    文章转载自:开源中国社区 [http://www.oschina.net] 想通过手机客户端(支持 Android.iPhone 和 Windows Phone)访问开源中国:请点这里 HTML5 是 ...

  8. 解决ubuntu下的firefox无法在线播放音频和视频的问题

    一贯无视 Linux 平台的腾讯(无贬义)理所当然地没有开发QQ音乐Linux版,于是想尝试QQ音乐网页版,结果发现歌曲无法播放.刚开始以为是腾讯还在网页版上用万恶的 Windows Media Pl ...

  9. ios平台cocos2d-x播放音频、视频、音效的Demo（支持网络视频）

    最近由ios应用转做游戏,游戏开始时需要播放一个视频,由于本身cocos2d-x播放视频的相关库,在网上搜到的资料都不是很全,我自己试过在cocos2dx直接调用ios的MediaPlayer来播放, ...

  10. 【Android】实验6 在应用程序中播放音频和视频 截止提交报告时间2016.4.21

    注:也可以在数独游戏项目中完成该实验的内容.

随机推荐

  1. [网鼎杯 2020 朱雀组]phpweb

    打开靶机,抓包分析,获得连个关键参数func和p,根据初始页面提示了解连个参数大概是功能和功能参数 测试func=system&p=ls提示hacker..说明有检测过滤 那么我们先读取源码看 ...

  2. Python中序列化/反序列化JSON格式的数据

    基本概念 JSON: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于 ...

  3. AI那么厉害，那测试开发和自动化测试这些职位是不是就多余了？

    在当今科技飞速发展的时代,AI大模型如ChatGPT等如同璀璨星辰般闪耀登场,它们的强大功能引发了各个领域的诸多思考.在软件测试领域,不少人心里直犯嘀咕:这AI大模型都这么厉害了,那测试开发和自动化测 ...

  4. CSP-J2024 T1(poker/扑克)题解

    洛谷CSP-J 2024自测指路 前情提要:虽然洛谷讨论区里大多数都是倾向用哈希解决该题,但实际上可以用一些邪门小技巧来A这道题awa 先来读题. 题目中说小 P 想知道他至少得向小 S 借多少张牌, ...

  5. win10中Docker安装、构建镜像、创建容器、Vscode连接实例

    Docker方便一键构建项目所需的运行环境:首先构建镜像(Image).然后镜像实例化成为容器(Container),构成项目的运行环境.最后Vscode连接容器,方便我们在本地进行开发.下面以一个简 ...

  6. 70 个群都来问我的 AI 日报，是这么做的。

    最近我给 FastGPT 用户交流群里接入了 AI 日报,每天早上 10 点会自动向群里推送 AI 日报,让群里的小伙伴们第一时间了解到昨天 AI 领域都发生了哪些大事. 效果大概是这个样子的: 如果 ...

  7. 深入JVM的Class文件结构

    Class文件由顺序的8位字节为基础单位构成的二进制流.各个项目严格按照顺序紧凑排列,无分隔符. 需要用8位字节以上空间数据项时按照高位在前分割成若干个8位字节存储. 只包含2种数据类型: 无符号数 ...

  8. callable结合FutureTask的多线程使用（免打扰模式）

    import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.ut ...

  9. 项目监控之sentry

    github: https://github.com/getsentry/sentry 1.什么是sentry? 当我们完成一个业务系统的上线时,总是要观察线上的运行情况,对于每一个项目,我们都没办法 ...

  10. pycharm集成Jupyter Notebook

    1. Jupyter Notebook Jupyter项目是一个非盈利的开源项目,源于 2014 年的 ipython 项目,支持运行 40 多种编程语言.Jupyter Notebook 的本质是一 ...