audio音频和video视频标签的使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var v=document.getElementsByTagName("video");
        function clickV()
        {
            if(v.paused)
            {
                v.play();
            }
            else
            {
                v.pause();
            }
        }
        function clickBig()
        {
            v.width=1000px;
            v.height=800px;

        }
        function clickSmall()
        {
            v.width=300px;
            v.height=300px;
        }
    </script>
</head>
<body>

<!--html5音频播放-->
<audio id="auto" src="1.mp3" controls="controls">你的浏览器不支持</audio><br/>
<button onclick="clickA()">播放/暂停</button>        <br/>
<script>
    var a=document.getElementById("auto");
    function clickA()
    {
        if(a.paused)
        {
            a.play();
        }
        else
        {
            a.pause();
        }
    }

</script>

<video id="video" src="a.mp4" controls="controls" width="800px" height="600px"></video>
<!--html5视频播放
浏览器不支持的话可以先把视频格式转换为ogg格式
-->
<video controls="controls">
    <source src="a.mp4">
    <source src="a.ogg">
</video>
<button onclick="clickV()">播放/暂停</button>        <br/>
<button onclick="clickBig()">放大</button>        <br/>
<button onclick="clickSmall()">缩小</button>        <br/>

</body>
</html>
时间: 2024-10-13 01:30:57

audio音频和video视频标签的使用的相关文章

H5新属性audio音频和 video视频的控制

class为mute时,为播放按钮,没有mute时则放静音按钮. $('.unmute').click(function() { if ($(this).hasClass('mute')) { video.muted = true; } else { video.muted = false; } $(this).toggleClass('mute') }) 学习链接:https://www.cnblogs.com/caoyibo/articles/5685994.html 原文地址:https:

HTML video 视频标签全属性详解

HTML 5 video 视频标签全属性详解 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE 9.Chrome),都不支持的(IE6.7.8).好吧,现在让我们从技术层面来认识HTML 5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件. Video标签的使用 Video标签含有src.poster.preloa

HTML 5 video 视频标签全属性详解

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE 9.Chrome),都不支持的(IE6.7.8).好吧,现在让我们从技术层面来认识HTML 5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件. Video标签的使用 Video标签含有src.poster.preload.autoplay.loop.control

HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型

现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) <video controls="controls" width="500px" height="300px" preload="metadata"> <source src="video/FF4.ogv" type="video/ogg"> <source src="video

(转)让所有浏览器支持HTML5 video视频标签

转自http://www.zhangxinxu.com/wordpress/?p=661 一.前面的唠叨 我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我听说而已,因为我不是个擅长FQ的人,到底如何我也不得而知. 与主题不相关的HTML5方面的东西我就不多说了,对于video标签,获取大家都听说了,这个标签的功能如同现在HTML语言中的img标签,就现在,比如要链接并显示一张图片,可以这样子: <img data-src="http://ima

html5 新增媒体标签详解 &lt;audio&gt;音频 &lt;vedio&gt; 视频 &lt;source&gt; &lt;canvas&gt; 标记定义图片&lt;embed&gt; 标记定义外部可交互内容或者插件 标记定义图片媒体资源

html5 变得更加简洁易用,新增了不少结构标签 比如<article> 标记一篇文章   <header> 定义头部 <footer> 定义底部  <nav> 定义导航  <section> 定义一个区域  <aside> 定义侧边栏 <hgroup> 标记定义文件夹一个区块的相关信息 同时也新增了 <audio><vedio><source>  下面我们就来详细的讲解一下这三个媒体标

HTML5之Audio音频标签学习

HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. controls:属性供添加播放.暂停和音量控件. 这些属性和<video>元素标签的属性很类似 如何工作 <audio src="song.mp3"></audio> 同样 <audio> 与 </audio> 之间插入的内容是供不支持 au

js控制html5 【video】标签中视频的播放和停止

需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----------------------------------------------------code---------------------------------------------------------------------------<br><br><!DOCT

html5音频和视频标签

在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在手机上面看视频必须要安装flash插件,但是手机本身内存就很小这样无疑增加了手机处理器德尔压力所以苹果公司在2007年之后宣城自己的任何设备将不再支持flash插件,不就安卓也紧随其后,那么取而代之的就是用html标签.   在html中插入视频标签 <video src='movie.webm'>