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. Python请求接口传Null

    Python中没有Null,与之对应的是None. {"dog": "keji", "cat": None}

  2. 2023NOIP A层联测32 T3 sakuya

    2023NOIP A层联测32 T3 sakuya 虚伪的期望,彬彬赛时都能 A 的数学题. 思路 考虑算出来总的花费,再除以 \(m!\) 求期望. 对于某个排列的花费为:\(\sum\limits ...

  3. .NET Core 线程(Thread)底层原理浅谈

    简介 线程,进程,协程基本概念不再赘述. 原生线程和用户线程 原生线程 在内核态中创建的线程,只服务于内核态 用户线程 由User Application创建的线程,该线程会在内核态与用户态中间来回穿 ...

  4. OSPF协议

    OSPF(Open Shortest Path First)开放式最短路径优先,是一种链路状态型路由协议,用于在网络中计算最短路径.OSPF协议是基于Dijkstra算法的,使用链路状态信息来计算最短 ...

  5. Java线程中断的本质和编程原则

    在历史上,Java试图提供过抢占式限制中断,但问题多多,例如前文介绍的已被废弃的Thread.stop.Thread.suspend和 Thread.resume等.另一方面,出于Java应用代码的健 ...

  6. Java开发

    总结java开发中知识点和问题点 基础: 常用加解密算法: [md5] import java.security.MessageDigest; public static final String e ...

  7. 无快不破，在本地 docker 运行 IDEA 里面的项目？

    目录 前言 Docker Compose 1. Docker Compose是什么? 2. Docker Compose 的具体步骤 3. 如何在IDEA项目里面使用Docker Compose 启动 ...

  8. 十亿手机号去重-BitSet

    思路:使用Java自带BitSet函数,将手机号分为两段(15555555555 -> 155+55555555) public class demo { public static void ...

  9. Fiddler抓包数据乱码

    前情 最近在项目测试中,使用到Fiddler来抓包看接口请求相关的情况 坑 通过Fiddler抓包,在Fiddler中看到的数据都是正常的,但是保存到本地,发现数据是乱码 Why? 工具里的提示是这样 ...

  10. webpack-dev-server配置https

    前情 最近在做一个浏览器通知的交互需求,但是查阅官方文挡,浏览器通知需要在https环境下才能工作,于是就研究怎么在开发环境下配置一个https服务器 STEP1 安装Chocolatey Choco ...