iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >html5如何实现开始播放当前的音频或视频
  • 767
分享到

html5如何实现开始播放当前的音频或视频

2024-04-02 19:04:59 767人浏览 八月长安
摘要

这篇文章将为大家详细讲解有关HTML5如何实现开始播放当前的音频或视频,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。实例带有播放和暂停按钮的一段视频:var m

这篇文章将为大家详细讲解有关HTML5如何实现开始播放当前的音频或视频,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

实例

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

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

定义和用法

play() 方法开始播放当前的音频或视频。

浏览器支持

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

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

语法

audio|video.play()

代码实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
</head>
<body>
<script>
      window.onload =function(){
          var ov=document.getElementById("a1");
          ov.onmouseover=function() {
               this.play();
          }
          ov.onmouseout =function() {
                this.pause();
          }

      };

</script>

<video  id="a1"  src="陈奕迅 - 陪你度过漫长岁月.mp4"  controls   loop width="400"  height="400">你的浏览器不支持</video>
</body>
</html>

关于“html5如何实现开始播放当前的音频或视频”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: html5如何实现开始播放当前的音频或视频

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

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

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

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

下载Word文档
猜你喜欢
  • html5如何实现开始播放当前的音频或视频
    这篇文章将为大家详细讲解有关html5如何实现开始播放当前的音频或视频,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。实例带有播放和暂停按钮的一段视频:var m...
    99+
    2024-04-02
  • html5如何实现视频播放
    这篇文章主要为大家展示了“html5如何实现视频播放”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5如何实现视频播放”这篇文章吧。一、html5技术优势...
    99+
    2024-04-02
  • Qt音视频开发之音频播放QAudioOutput如何实现
    这篇文章主要介绍了Qt音视频开发之音频播放QAudioOutput如何实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Qt音视频开发之音频播放QAudioOutput如何实现文章都会有所收获,下面我们一起来看...
    99+
    2023-07-05
  • WinForm中如何播放音频或视频文件
    在WinForm中播放音频或视频文件可以使用Windows Media Player控件,以下是一个简单的示例代码: using S...
    99+
    2024-04-08
    winform
  • Qt音视频开发之音频播放QAudioOutput的实现
    目录一、前言二、效果图三、体验地址四、相关代码五、功能特点5.1 基础功能5.2 特色功能5.3 视频控件5.4 音频组件一、前言 以前一直以为只有Qt5以后才有QAudioOutp...
    99+
    2023-03-10
    Qt实现音频播放QAudioOutput Qt音频播放QAudioOutput Qt音频播放
  • Android 音视频开发—MediaPlayer音频与视频的播放介绍
    Android多媒体中的——MediaPlayer,我们可以通过这个API来播放音频和视频该类是Androd多媒体框架中的一个重要组件,通过该类,我们可以以最小的步骤来获取,解码和播放音视频。 它支持...
    99+
    2023-09-21
    android 音视频
  • HTML5如何实现视频播放功能
    这篇文章将为大家详细讲解有关HTML5如何实现视频播放功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。hivideo是一款基于html5的视频播放器,摒弃video原有...
    99+
    2024-04-02
  • Android实现音乐视频播放
    本文实例为大家分享了Android实现音乐视频播放的具体代码,供大家参考,具体内容如下 步骤 1、新建一个安卓项目,再加一个assets包 2、在 assets中加入一段音频 3...
    99+
    2024-04-02
  • html5可以播放哪些格式的视频和音频
    这篇文章主要讲解了“html5可以播放哪些格式的视频和音频”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5可以播放哪些格式的视频和音频”吧! ...
    99+
    2024-04-02
  • 微信小程序如何停止其他视频播放当前视频
    这篇文章主要介绍了微信小程序如何停止其他视频播放当前视频,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序停止其他视频播放当前视频,代...
    99+
    2024-04-02
  • C++ Qt如何实现音视频播放功能
    这篇文章将为大家详细讲解有关C++ Qt如何实现音视频播放功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。由于最近着手的Qt项目需要视频播放 自己做的时候踩了很多坑&n...
    99+
    2023-06-21
  • Qt+Quick如何实现播放音乐和视频
    这篇文章主要介绍了Qt+Quick如何实现播放音乐和视频的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Qt+Quick如何实现播放音乐和视频文章都会有所收获,下面我们一起来看看吧。MediaPlayer 是 Q...
    99+
    2023-07-05
  • 如何使用HTML5实现在线视频播放
    这篇文章主要为大家展示了“如何使用HTML5实现在线视频播放”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用HTML5实现在线视频播放”这篇文章吧。编码与...
    99+
    2024-04-02
  • Android如何实现播放视频
    这篇文章将为大家详细讲解有关Android如何实现播放视频,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、通过intent的方式,调用系统自带的播放器  Uri uri&n...
    99+
    2023-05-31
    android
  • Django如何实现视频播放
    这篇文章主要讲解了“Django如何实现视频播放”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Django如何实现视频播放”吧!view视图import reimport ...
    99+
    2023-06-30
  • Qt+Quick实现播放音乐和视频的开发
    目录1、播放音乐2、播放视频3、多媒体元信息MediaPlayer 是 QML 提供的核心多媒体类,可以播放音频、视频。要使用 MediaPlayer,需要引入 QtMultimed...
    99+
    2023-03-08
    Qt Quick实现播放音乐 Qt Quick播放视频 Qt Quick
  • Android怎么实现音乐视频播放
    这篇文章给大家分享的是有关Android怎么实现音乐视频播放的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。步骤新建一个安卓项目,再加一个assets包在 assets中加入一段音频在界面中加入音乐的“开始”按钮和...
    99+
    2023-06-15
  • C++ Qt实现音视频播放功能
    由于最近着手的Qt项目需要视频播放 自己做的时候踩了很多坑 避免以后踩坑 故在此记录实现过程  Qt版本 5.9 基于C++11 Qt核心组件与附加组件安装时请打钩 否则可能出现项目...
    99+
    2024-04-02
  • html5中如何实现嵌入视频自动播放
    这篇文章主要介绍了html5中如何实现嵌入视频自动播放,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。各种查资料,找到一个方法,记录一下。核心是监听了canplaythroug...
    99+
    2023-06-09
  • HTML5中的音频和视频媒体播放元素有哪些
    这篇文章主要介绍“HTML5中的音频和视频媒体播放元素有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5中的音频和视频媒体播放元素有哪些”文章能帮助大家...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作