h5视频/DOM和音频

最新推荐文章于 2021-06-21 14:15:06 发布

liurenbuzai

最新推荐文章于 2021-06-21 14:15:06 发布

阅读量751

点赞数

分类专栏：基础

本文链接：https://blog.csdn.net/liurenbuzai/article/details/80246771

版权

基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

html5<video>使用DOM进行控制

<video>同样拥有

方法：用于播放，暂停以及加载

属性：如时长，音量等可以被读取或设置

dom事件：通知你<video>元素开始播放。已暂停，已停止等

<html>
<body>
<div style="text-align:center;">
  <button οnclick="playPause()">播放/暂停</button>
  <button οnclick="makeBig()">大</button>
  <button οnclick="makeNormal()">中</button>
  <button οnclick="makeSmall()">小</button>
  <br />
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/E:/练习题/movie.mp4" type="video/mp4" />
    Your browser does not support HTML5 video.
  </video>
</div>

<script type="text/javascript">
    var myVideo=document.getElementById("video1");

    function playPause()
    {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }

    function makeBig()
    {
        myVideo.width=560;
    }

    function makeSmall()
    {
        myVideo.width=320;
    }

    function makeNormal()
    {
        myVideo.width=420;
    }
</script>
</body>
</html>

html5<video>方法，属性以及事件

play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress

在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用

音频格式

当前，auudio元素支持三种音频格式

Ogg Vordio MP3 Wav

如何工作

control属性供添加播放，暂停和音量控件

<audio>和</audio>之间插入的内容是不支持audio元素的浏览器显示的

<audio src="/E:/练习题/movie.mp4"controls="controls">

<audio>标签的属性

autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	        loop	        如果出现该属性，则每当音频结束时重新开始播放。
preload	        preload	        如果出现该属性，则音频在页面加载时进行加载，并预备播放。
                                如果使用 "autoplay"，则忽略该属性。
src	        url	        要播放的音频的 URL。

liurenbuzai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5视频/DOM和音频

html5&lt;video&gt;使用DOM进行控制&lt;video&gt;同样拥有方法：用于播放，暂停以及加载属性：如时长，音量等可以被读取或设置dom事件：通知你&lt;video&gt;元素开始播放。已暂停，已停止等&lt;html&gt;&lt;body&gt;&lt;div style="text-align:center;"&gt; &lt;button onc
复制链接

扫一扫