iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >html5中pause()怎么用
  • 495
分享到

html5中pause()怎么用

2024-04-02 19:04:59 495人浏览 独家记忆
摘要

小编给大家分享一下HTML5中pause()怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实例带有播放和暂停按钮的一段视频

小编给大家分享一下HTML5中pause()怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

实例

带有播放和暂停按钮的一段视频:

var myVideo=document.getElementById("video1");
function playVid()
  {
  myVideo.play();
  }
function pauseVid()
  {  myVideo.pause();
  }

定义和用法

pause() 方法停止(暂停)当前播放的音频或视频。

浏览器支持

所有主流浏览器都支持 pause() 方法。

注释:Internet Explorer 8 以及更早版本不支持该方法。

语法

audio|video.pause()

如果要用js来控制audio的暂停与播放,我们不能直接在audio上添加点击事件,需要另外添加按钮才可以绑定点击事件。

html代码如下:

<button onclick="playPause()">播放/暂停</button>
<audio id="audio1" width="420" >
    <source src="example.mp4" type="audio/mp4" />
    <source src="example.ogg" type="audio/ogg" />
</audio>

JS代码如下:

var myAudio = document.getElementById('audio1');
    function playPause(){
        if(myAudio.paused){
            myAudio.play();
        }else{
            myAudio.pause();
        }
    }

以上是“html5中pause()怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网node.js频道!

--结束END--

本文标题: html5中pause()怎么用

本文链接: https://www.lsjlt.com/news/80839.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • html5中pause()怎么用
    小编给大家分享一下html5中pause()怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实例带有播放和暂停按钮的一段视频...
    99+
    2024-04-02
  • Linux中pause函数怎么用
    这篇文章主要为大家展示了“Linux中pause函数怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Linux中pause函数怎么用”这篇文章吧。##pause函数函数原型:int ...
    99+
    2023-06-15
  • html5中size怎么用
    这篇文章主要为大家展示了“html5中size怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5中size怎么用”这篇文章吧。 ...
    99+
    2024-04-02
  • html5中margin怎么用
    这篇文章主要介绍“html5中margin怎么用”,在日常操作中,相信很多人在html5中margin怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5中marg...
    99+
    2024-04-02
  • html5中output怎么用
    小编给大家分享一下html5中output怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在h...
    99+
    2024-04-02
  • html5中mark怎么用
    这篇文章主要介绍了html5中mark怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在html5中,ma...
    99+
    2024-04-02
  • html5中ondrag怎么用
    这篇文章给大家分享的是有关html5中ondrag怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实例在 <p> 元素开始拖动时执行...
    99+
    2024-04-02
  • HTML5中history怎么用
    这篇文章主要为大家展示了“HTML5中history怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML5中history怎么用”这篇文章吧。一、认识w...
    99+
    2024-04-02
  • html5中canvas怎么用
    这篇文章给大家分享的是有关html5中canvas怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。大家都知道,目前并不是所有的浏览器中支持html5,就算是支持html5的浏...
    99+
    2024-04-02
  • html5中style怎么用
    这篇文章主要介绍了html5中style怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 用法:1、用于规定...
    99+
    2024-04-02
  • html5中contextmenu怎么用
    这篇文章主要为大家展示了“html5中contextmenu怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5中contextmenu怎么用”这篇文...
    99+
    2024-04-02
  • HTML5中H5Slides怎么用
    这篇文章主要介绍HTML5中H5Slides怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!H5Slides是一款基于HTML5的轻量级幻灯片播放系统,以前我们给客户演示幻灯片时...
    99+
    2024-04-02
  • Kubernetes pod里的pause-amd64容器有什么用
    这篇文章主要介绍“Kubernetes pod里的pause-amd64容器有什么用”,在日常操作中,相信很多人在Kubernetes pod里的pause-amd64容器有什么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法...
    99+
    2023-06-04
  • docker pause和unpause命令有什么用
    这篇文章给大家分享的是有关docker pause和unpause命令有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。docker pause && docker unpause当你运行了一...
    99+
    2023-06-02
  • html5中nav怎么使用
    本篇内容主要讲解“html5中nav怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html5中nav怎么使用”吧! 在htm...
    99+
    2024-04-02
  • HTML5中name怎么使用
    这篇文章主要介绍“HTML5中name怎么使用”,在日常操作中,相信很多人在HTML5中name怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家...
    99+
    2024-04-02
  • html5中top怎么使用
    这篇文章主要介绍“html5中top怎么使用”,在日常操作中,相信很多人在html5中top怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5中top怎么使用”...
    99+
    2024-04-02
  • HTML5中Localstorage怎么使用
    这篇文章主要讲解了“HTML5中Localstorage怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML5中Localstorage怎么使用”...
    99+
    2024-04-02
  • html5中audio怎么使用
    今天小编给大家分享一下html5中audio怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解...
    99+
    2024-04-02
  • HTML5中Web Notification怎么用
    小编给大家分享一下HTML5中Web Notification怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者工具,...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作