H5--> 操做

時間 2020-06-20

標籤 h5 简体版

原文原文鏈接

HTML5支持的視頻格式：

Ogg =帶有Theora視頻編碼+Vorbis音頻編碼的Ogg文件
支持的瀏覽器:F、C、O
MEPG4=帶有H.264視頻編碼+AAC音頻編碼的MPEG4文件
支持的瀏覽器: S、C
WebM=帶有VP8視頻編碼+Vorbis音頻編碼的WebM格式
支持的瀏覽器: I、F、C、Ojavascript

基本用法

< 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();
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。