H5--> <audio>操作

HTML5支持的视频格式：

Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式
支持的浏览器: I、F、C、O

基本用法

< video  controls="controls"  width="800">
    <source src="where.ogg" >
    <source src="where.mp4" >
    您的浏览器暂不支持video标签。播放视频
</ video >

常用的属性

属性 值 描述
autoplay autoplay（可以不写） 自动播放
controls controls（可以不写） 向用户展示播放控件
width/height pixels（像素值：不写单位） 设置播放器宽度/高度
loop loop 播放完是否继续播放该视频，循环播放
src url 视频地址

video的常用的API属性

属性 说明
play 播放
pause 暂停
muted 静音
volume 音量值
currentTime 当前播放的时间，单位秒
ended 返回当前播放是否结束标志

例子：基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>多媒体</title>

</head>
<body>
<video controls width="600" autoplay id="v">
    <source src="aa.mkv">
    <source src="aa.mp4">
    您的浏览器不支持video标签播放视频
</video>
<p>
    <button id="play" onclick="playa()">播放</button>
    <button id="big">变大</button>
    <button id="full">全屏</button>
    <button id="none">静音</button>
    <input type="range" min="0" max="1" step="0.01" onchange="volumea()" id="e"/>
    <span id="val">50</span>
</p>
</body>
</html>

播放，放大

var play = document.getElementById('play');
    var big = document.getElementById('big');
    var full = document.getElementById('full');

    var v = document.getElementById('v');
    function playa(){
        if(v.paused){
            v.play()
        } else{
            v.pause();
        }
    }

    big.onclick = function(){
        v.width = 1000;
    }

全屏+退出全屏

full.addEventListener('click',function(){
        if(v.webkitRequestFullscreen){
            v.webkitRequestFullscreen();
        }
        if(v.mozRequestFullScreen){
            v.mozRequestFullScreen();
        }
        if(v.requestFullscreen){
            v.requestFullscreen();
        }
        v.addEventListener('click',function(){
            if(document.webkitCancelFullScreen){
                document.webkitCancelFullScreen();
            }
            if(document.mozCancelFullScreen){
                document.mozCancelFullScreen();
            }
            if(document.cancelFullScreen){
                document.cancelFullScreen();
            }

        })
    })

静音

none.addEventListener('click',function(){
        if(v.muted){
            v.muted = false;
        }else{
            v.muted = true;
        }
    })

调节音量

function volumea(){
        v.volume = e.value;
        val.innerHTML = (e.value*100).toFixed();
    }
posted @ 2016-10-29 12:12  LeonVincent  阅读(472)  评论(0)  编辑  收藏  举报