弹来弹去跑马灯!

H5播放音频和视频

H5播放音频和视频:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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 @   wgscd  阅读(22)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
历史上的今天:
2019-07-10 WPF Good UI 2
点击右上角即可分享
微信分享提示