H5--> <audio>操作

最新推荐文章于 2024-06-14 16:04:17 发布

dengtiao5633

最新推荐文章于 2024-06-14 16:04:17 发布

阅读量251

点赞数

原文链接：http://www.cnblogs.com/leon94/p/6025238.html

版权

本文详细介绍了HTML5中用于播放视频的<video>标签的使用方法，包括支持的视频格式如Ogg、MPEG4、WebM，常用属性如autoplay、controls、loop等，以及如何通过API控制视频播放。同时提供了代码示例，演示了如何实现自动播放、调整大小、全屏、静音和音量控制等功能。

摘要由CSDN通过智能技术生成

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

转载于:https://www.cnblogs.com/leon94/p/6025238.html

dengtiao5633

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫