弹来弹去跑马灯!

H5播放音频和视频

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

 

posted @ 2024-07-10 15:30  wgscd  阅读(52)  评论(0)    收藏  举报