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. ESP8266 + SN74HC595N(8位移位寄存器)

    目录 目录 介绍 准备 连线 代码 代码优化 运行 问题 总结 介绍 使用SN74HC595N 为 ESP8266 扩展 SN74HC595N(8位移位寄存器IC) 1. Vcc 16引脚 电压输入 ...

  2. 万星开源项目：System Design Primer - 学习系统设计的必备指南

    GitHub 链接:https://github.com/donnemartin/system-design-primer 什么是 System Design Primer? System Desig ...

  3. Minio安装以及使用

    Minio介绍 MinIO 是一个基于Apache License v2.0开源协议的对象存储服务.适合于存储大容量非结构化的数据,例如图片.视频.日志文件.备份数据和容器/虚拟机镜像等,而一个对象文 ...

  4. ubuntu卸载php8后在命令行终端上面还是显示8的版本

    使用apt install了php8然后卸载后发现php -v还是8的版本,找来找去,最后发现是需要卸载sudo apt remove php8.0-cli才行 然后使用 sudo apt autor ...

  5. gearman实现任务分发

    偶然发现了这个gearman,觉得这玩意儿挺好用,非常适合PHP运行一部分业务. 话不多说,安装一下. 使用apt查找 sudo apt search gearman 找到了这个 gearman/bi ...

  6. BeanStalkd 做队列服务

    今天无意间看到这个仓库讲php关于 BeanStalkd 的扩展,然后就去了解了一下beanstalkd,才知道它可以用来做队列服务. 话不多说,安装一下试试. 首先 sudo apt search ...

  7. apisix问题记录

    负载均衡 可以给 rest api(9080)做负载均衡 不可以给dashboard做负载均衡,否则会出现闪退,dashboard之间的token并不是通用的 路由导出 openapi 路由导出ope ...

  8. Think in Java之构造器的真正调用顺序

    构造器是OOP的重要组成部分,很多人认为它很容易.只不过是new了一个对象而已.而think in java的作者却告诉我们,其实这并不容易.先看下面这个例子.在你没看结果之前,你觉得你的答案是对的么 ...

  9. 【深入Java虚拟机】之七：Java编译与JIT编译

    编译过程 不论是物理机还是虚拟机,大部分的程序代码从开始编译到最终转化成物理机的目标代码或虚拟机能执行的指令集之前,都会按照如下图所示的各个步骤进行: 其中绿色的模块可以选择性实现.很容易看出,上图中 ...

  10. golang之热加载Fresh&air

    Fresh 是一个命令行工具,每次保存Go或模版文件时,该工具都会生成或重新启动Web应用程序.Fresh将监视文件事件,并且每次创建/修改/删除文件时,Fresh都会生成并重新启动应用程序.如果go ...