video/audio的小例子（H5）

作者: 被时光移动的城 | 来源:发表于2017-05-31 11:42 被阅读139次

关于H5(3)
video/audio的小例子（H5）
H5新标签audio&video
## HTML基础-多媒体标签
h5
一些缩写的全称
html5新特性及常见问题
h5新特性和viewport
CMSampleBufferRef
第四天h5,css3

文章只是简单的对视频处理（开始、暂停、快进、快退、声音、循环播放等）。音视频方法属性方法基本相同。想要实现更多操作可参考API。
音视频参考手册：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

图片来自参考手册.png

运行效果：

image.png

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            video{
                display: block;
                margin: 0px auto;
            }
            #div{
                width: 500px;
                height: 100px;
                margin: 0px auto;
                margin-top: 100px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var vd = document.getElementById("vd");
                var start = document.getElementById("start");
                var pause = document.getElementById("pause");
                var range = document.getElementById("range");
                var spgo = document.getElementById("speedGo");
                var spbc = document.getElementById("speedBack");
                //开始
                start.onclick = function(){
                    vd.play();
                }
                //暂停
                pause.onclick = function(){
                    vd.pause();
                }
                //音量控制
                range.onchange = function(){
                    document.title = this.value;
                    vd.volume = this.value/100;
                }
                //快进
                spgo.onclick = function(){
                    vd.currentTime = vd.currentTime+10;
                }
//              快退
                spbc.onclick = function(){
                    vd.currentTime = vd.currentTime-10;
                }
            }
        </script>
    </head>
    <body>
        <div id="div">
        <input type="button" name="" id="start" value="开始" />
        <input type="button" name="" id="pause" value="暂停" />
        <input type="button" name="" id="speedGo" value="快进" />
        <input type="button" name="" id="speedBack" value="快退" />
        <input type="range" name="range" id="range" min="0" max="100" value="100" />
        </div>
        <!--controls="controls"  进度条控制-->
        <!--loop="loop"  循环播放-->
        <!--autoplay="autoplay" 自动播放-->
        <!--poster="图片链接"  设置视频封面-->
        <video id="vd" src="../video和audio/young.mp4" controls="controls" loop="loop"  width="800px"></video>
    </body>
</html>

如有问题欢迎交流。

如转载请注明出处，谢谢！