html css js

10.html5笔记4 audio,video

"Hello World, Hello Blog"

Posted by wudimingwo on December 15, 2018 
1

         <audio controls src="http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com"></audio>

如果不添加 controls 属性, 默认不会显示.

1
2
3
4
5
6
7
8
9
10

         <video width="800" height="">
         	<source src="myvideo.mp4" type="video/mp4"></source>
         	<source src="myvideo.ogv" type="video/ogg"></source>
         	<source src="myvideo.webm" type="video/webm"></source>
         	<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
         		<param name="movie" value="myvideo.swf" />
         		<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
         	</object>
         	当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
         </video>

如果不添加 controls 属性 则不显示控件

image.png

谷歌浏览器 在加载完 之后,才会自动播放

image.png image.png image.png image.png

1
2
3
4
5

            var audio = document.createElement("audio");
//          var audio = new Audio();
            audio.setAttribute("controls","controls");
            audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
            document.body.appendChild(audio);

video 没有 Video() 构造函数 image.png

1
2

            audio.play();
            audio.pause();

image.png

1

        audio.volume -= 0.1

``` 

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
58
59
60
61
62
63
64

        var volumeRange = document.getElementById("volumeRange");
        
        volumeRange.onchange = function () {
        	audio.volume = Number(this.value);
        }
    </script> ``` ![image.png](https://upload-images.jianshu.io/upload_images/13637909-8f5b5dec7b1490fd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ![image.png](https://upload-images.jianshu.io/upload_images/13637909-64c566b9517aa44a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ```
<body>
     
     
     volume:<input type="range" min="0" max="1" step="0.1" value="0.5" name="volumeRange" id="volumeRange"  /><br />
     playbackrate<input type="range" min="-1" max="8" step="0.2" name="playbackrate" id="playbackrate" value="1" /><span class="playbackrate"></span><br />
    <script type="text/javascript">
        var audio = document.createElement("audio");
        audio.setAttribute("controls","controls");
        audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
        document.body.appendChild(audio);
        
        var volumeRange = document.getElementById("volumeRange");
        var playbackrate = document.getElementById("playbackrate");
        var playbackrateSpan = document.getElementsByClassName("playbackrate")[0];
        
        volumeRange.onchange = function () {
        	audio.volume = Number(this.value);
        }
        playbackrate.onchange = function () {
        	audio.playbackRate = Number(this.value);
        	playbackrateSpan.innerText = this.value;
        }
        
    </script>
</body> ``` ![image.png](https://upload-images.jianshu.io/upload_images/13637909-6576f65c7837c112.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ```
<body>
     
     
     volume:<input type="range" min="0" max="1" step="0.1" value="0.5" name="volumeRange" id="volumeRange"  /><br />
     playbackrate<input type="range" min="-1" max="8" step="0.2" name="playbackrate" id="playbackrate" value="1" /><span class="playbackrate"></span><br />
     currentTime <input type="range" min="0" step="1" name="currentTime" id="currentTime" value="" /> <br />
    <script type="text/javascript">
        var audio = document.createElement("audio");
        audio.setAttribute("controls","controls");
        audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
        document.body.appendChild(audio);
        
        var volumeRange = document.getElementById("volumeRange");
        var playbackrate = document.getElementById("playbackrate");
        var currentTime = document.getElementById("currentTime");
        var playbackrateSpan = document.getElementsByClassName("playbackrate")[0];
        
        volumeRange.onchange = function () {
        	audio.volume = Number(this.value);
        }
        currentTime.onchange = function () {
          var num = audio.duration;
          currentTime.setAttribute("max",num);
        	audio.currentTime = Number(this.value);
        	console.log(this.value);
        }
        playbackrate.onchange = function () {
        	audio.playbackRate = Number(this.value);
        	playbackrateSpan.innerText = this.value;
        }
        
    </script>
</body> ```

image.png image.png image.png image.png

相当于监听状态?

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

<body>
         
         
         volume:<input type="range" min="0" max="1" step="0.1" value="0.5" name="volumeRange" id="volumeRange"  /><br />
         playbackrate<input type="range" min="-1" max="8" step="0.2" name="playbackrate" id="playbackrate" value="1" /><span class="playbackrate"></span><br />
         currentTime <input type="range" min="0" step="1" name="currentTime" id="currentTime" value="" /> <br />
         <input type="button" name="startPause" id="startPause" value="播放" /><br />
        <script type="text/javascript">
            var audio = document.createElement("audio");
            audio.setAttribute("controls","controls");
            audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
            document.body.appendChild(audio);
            
            var volumeRange = document.getElementById("volumeRange");
            var playbackrate = document.getElementById("playbackrate");
            var currentTime = document.getElementById("currentTime");
            var startPause = document.getElementById("startPause");
            
            var playbackrateSpan = document.getElementsByClassName("playbackrate")[0];
            
            startPause.onclick = function () {
            	if (audio.paused) {
            		audio.play();
            		this.value = "停止";
            	}else {
            	  audio.pause();
            		this.value = "播放";
            	}
            }
            
            volumeRange.onchange = function () {
            	audio.volume = Number(this.value);
            }
            currentTime.onchange = function () {
              var num = audio.duration;
              currentTime.setAttribute("max",num);
            	audio.currentTime = Number(this.value);
            	console.log(this.value);
            }
            playbackrate.onchange = function () {
            	audio.playbackRate = Number(this.value);
            	playbackrateSpan.innerText = this.value;
            }
            
        </script>

image.png

用来兼容的.

image.png

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

    <body>
         
         
         volume:<input type="range" min="0" max="1" step="0.1" value="0.5" name="volumeRange" id="volumeRange"  /><br />
         playbackrate<input type="range" min="-1" max="8" step="0.2" name="playbackrate" id="playbackrate" value="1" /><span class="playbackrate"></span><br />
         currentTime <input type="range" min="0" step="1" name="currentTime" id="currentTime" value="" /> <br />
         <input type="button" name="startPause" id="startPause" value="播放" /><br />
        <script type="text/javascript">
            var audio = document.createElement("audio");
            audio.setAttribute("controls","controls");
            audio.src = "http://mp4.ik123.com/Dj_www.ik123.com/2010/201808%2Fik123_11762.mp4?vsid=ce166731cc8e32b23726ae416d8a2e67&name=www.ik123.com";
            document.body.appendChild(audio);
            
            var volumeRange = document.getElementById("volumeRange");
            var playbackrate = document.getElementById("playbackrate");
            var currentTime = document.getElementById("currentTime");
            var startPause = document.getElementById("startPause");
            
            var playbackrateSpan = document.getElementsByClassName("playbackrate")[0];
            
            startPause.onclick = function () {
            	if (audio.paused) {
            		audio.play();
            		this.value = "停止";
            	}else {
            	  audio.pause();
            		this.value = "播放";
            	}
            }
            
            volumeRange.onchange = function () {
            	audio.volume = Number(this.value);
            }
            
            audio.onloadedmetadata = function () {
              var num = audio.duration;
              currentTime.setAttribute("max",num);
            }
            
            currentTime.onchange = function () {
            	audio.currentTime = Number(this.value);
            	console.log(this.value);
            }
            playbackrate.onchange = function () {
            	audio.playbackRate = Number(this.value);
            	playbackrateSpan.innerText = this.value;
            }
            
        </script>
    </body>

image.png image.png

CATALOG
    FEATURED TAGS
    html css js
    FRIENDS