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. .NET 平台 WPF 通用权限开发框架 (ABP)

    前言 对于大多数.NET后端开发者而言,ABP框架已经相当熟悉,可以轻松进行二次开发,无需重复实现用户角色管理.权限控制.组织管理和多租户等功能. 然而,ABP框架主要专注于Web应用,对于桌面端和移 ...

  2. TextIn ParseX文档解析SDK工具新增Java版本

    TextIn ParseX通用文档解析是一款大模型友好的解析工具,支持将pdf文档.jpg.img图像等文件快速转换为markdown格式,支持各类表格.公式解析,帮助大语言模型的数据清洗和文档问答任 ...

  3. switch、case语句的问题

    switch.case语句: 点击查看代码 int state = 1; switch(state) { case 1: { //状态1执行的程序 } case 2: { //状态2执行的程序 } d ...

  4. 牛客多校H题题解

    链接:[https://ac.nowcoder.com/acm/contest/81597/H] 来源:牛客网 题目描述 Red stands at the coordinate \((0,0)\) ...

  5. WSL（Ubuntu）连接 Windows 的 USB 设备（完结）

    前言 最近使用 Linux 通过串口与设备通信,之前使用 Linux 都是在 VMware 里创建虚拟机,该平台下若有串口通信需求,有专门的按键功能切换很方便. 但切换了 WSL2 (windows ...

  6. dotnet学习笔记-专题06-过滤器和中间件-01

    1. 基本概念 在ASP.NET Core中,中间件和过滤器都是处理HTTP请求的重要组件,但它们在应用中的位置.作用范围以及使用方式有所不同. 1.1 中间件和过滤器的区别 1.1.1 中间件 位置 ...

  7. HTTP请求与响应格式解析

     HTTP是Web浏览器与Web服务器之间通信的标准协议,HTTP指明了客户端如何与服务器建立连接,如果从服务器请求数据,服务器如何响应请求,关闭连接.HTTP是使用TCP/IP协议进行传输数据的,也 ...

  8. HAR文件

    简介 HAR(HTTP Archive format),是一种或 JSON 格式的存档格式文件,通用扩展名为 .har.Web 浏览器可以使用该格式导出有关其加载的网页的详细性能数据. 使用场景 在开 ...

  9. OneForAll - 功能强大的子域收集工具

    OneForAll,是 shmilylty 在 Github 上开源的子域收集工具,目前版本为 v0.4.3. 收集能力强大,利用证书透明度收集子域.常规检查收集子域.利用网上爬虫档案收集子域.利用D ...

  10. Linux禁止某个sudo用户修改root密码

    (1) 假设被禁止的sudo用户名为 user (2) 禁止user用户使用passwd命令更改密码(非最终配置) vim /etc/sudoers 加入 user ALL=(root)!/usr/b ...