• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5开始播放当前的音频或视频的方法

html5开始播放当前的音频或视频的方法

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5,h5,音频等相关知识,匿名希望在学习及工作中可以帮助到您

实例

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

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开始播放当前的音频或视频的方法的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03关于wxcanvas的内容推荐
  • 2018-12-03这个canvas做出来的交互效果具体是怎么实现的?有什么工具有助于做这类开发吗?
  • 2018-12-03H5学习之旅-H5的新特性(1)
  • 2017-08-06详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
  • 2017-08-06用HTML5中的Canvas结合公式绘制粒子运动的教程
  • 2018-12-03IOS页面边框是显示不出来怎么办?border-image实例教程
  • 2018-12-03canvas与html5实现视频截图功能示例
  • 2018-12-03html5 command标签的用法和<command>标签的使用案例详解
  • 2018-12-03各大银行会在乎 Chrome 将会移除对 NPAPI 的支持的消息吗?
  • 2018-12-03[html5游戏开发]经典的推箱子

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 关于bootstrap框架使用的教程汇总
    • 浅谈HTML5 & CSS3的新交互特性
    • HTML5中你不知道的5个新功能
    • HTML5 input number是什么?HTML5 input type的详细介绍(内附属性图)
    • 乐车邦app 前端用的什么框架和技术?
    • phonegap操作数据库详解
    • HTML5架构(HTML5 Boilerplates )
    • 一张图片能隐含千言万语之隐藏你的程序代码_html5教程技巧
    • HTML5实战与剖析之WebSockets简介
    • 六种常见的HTML5写法误用

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有