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. Selenium操作：测试form表单

    from表单是经常测试的用例,用户登录.注册等都会用到form表单,本文简单设计了一个用户登录的form表单,并对该form表单进行测试 一.自定义form表单 1.用到的组件 如下图,图中定义了一个 ...

  2. [Windows] 屏幕截图工具Snipaste 开发过程更轻松

    前言 老大:你去把用户登录代码写完. 老大:你把这周的周报发一下 老大:你把生产的数据清理一下. 结果.... 今天刚把登录代码写完,下班,明天就处理别的事情去了!!! 之后我就... 直接F1 截屏 ...

  3. C语言指针一些常见的错误用法

    指针用的好犹如神助,用不好会让你叫苦连连,但大多数人是用不好指针的,所以后来的很多语言都把指针封装,屏蔽.比如JAVA,java是没有指针的,但是很多地方都用到指针,不过不对用户开放,语言的自身机制帮 ...

  4. 女友用python写的充值卡冲话费的代码

    女友最近在学习python ,于是我拿当初我们学习C语言的课程设计 手机号充话费功能让她尝试着做一下,在分析完思路和帮助改错的情况下代码如下: python2.7.17 环境 #/usr/bin/py ...

  5. dp题单vjudge 8.17

    HDU-1024 Max Sum Plus Plus https://acm.hdu.edu.cn/showproblem.php?pid=1024 可以想到用dp过,但是无论时间和空间都不够,然后就 ...

  6. 高性能计算-openmp编程-(探究 for/collapse)(11)

    1. 目标:探究嵌套循环 for 和 collapse 编程 2. 内容 (1). for 并行区默认对最近外层的循环控制变量私有,并对其划分并行,不必指明 private,内层循环体入口的循环控制变 ...

  7. （Python基础教程之十九）Python优先级队列示例

    1.什么是优先队列 优先级队列是一种抽象数据类型,类似于常规队列或堆栈数据结构,但每个元素还具有与之关联的"优先级". 在优先级队列中,优先级高的元素先于优先级低的元素提供. 如果 ...

  8. pycharm之常用插件

    参考:http://pycharm.iswbm.com/zh_CN/latest/ 1. Key Promoter X 如果让我给新手推荐一个 PyCharm 必装插件,那一定是 Key Promot ...

  9. 简单理解Linux File的操作

    类Unix系统是支持多个进程打开同一个文件,进行读写. 得益于类Unix系统对于文件操作的特殊设计. 分为三个数据结构 进程表项:其中包含进程中打开的文件和设备的文件描述符.还包含该文件描述符对应的文 ...

  10. ai大模型流式输出------基于SSE协议的长连接实现

    传统的http1.0请求开发,已经满足了我们日常的web开发.一般请求就像下图这样子,客服端发起一个请求(触发),服务端做出一个响应(动作): 有时会有诸如实时刷新,实时显示的场景,我们往往是客户端定 ...