一般来说推荐使用,第三方的媒体播放库【例如 videojs 等】,这些库的ui界面,js控制都已写好,功能也扩展的比较丰富 ,直接参考文档使用更加的高效!

  这里还是 记录一下 html 原生 video 标签

  <video>

  <source> //里面可以插入一个source标签 指定 视频路径和 视频格式 【如果测试时候某些浏览器存在视频兼容问题,可以把视频转成多个格式,并写上多个source标签 提高代码的兼容性,浏览器会从上到下尝试去找并执行 source里的内容,第一个不行就下一个 直至运行ok】

</video>

 <audio>

   <source> //video 除了poster 封面属性 其他属性 audio都支持 且含义一致

</audio>

属性【

  src=' ' //视频路径

  autoplay:自动播放

  controls:进度条 ,音量的控制条显示

  muted:默认播放静音    

  poster:未播放前 视频封面

  preload:设置视频的加载方式,三个属性:auto[自动,视频有多大就自动下载多大,下载好了直接可以播放],metadata【只加载关键帧】,none【什么都不加载,视频无法播放】

  loop:是否循环播放    

 

html5 video/audio 标签的更多相关文章

  1. HTML5 video 视频标签 常用属性

    最近在做手机端的 h5 页面的视频直播功能,用到了 Video 标签.其常用的属性有以下几个: src.poster.preload.autoplay.loop.controls.width.heig ...

  2. HTML5的Audio标签打造WEB音频播放器

    目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...

  3. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  4. HTML5 video 视频标签全属性详解

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  5. 关于HTML5中audio标签在手机中的autoplay

    这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...

  6. HTML5中 audio标签的样式修改

    由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...

  7. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  8. 用HTML5的Audio标签做一个歌词同步的效果

    HTML5出来这么久了,但是关于它里面的audio标签也就用过那么一次,当然还仅仅只是把这个标签插入到了页面中.这次呢就刚好趁着帮朋友做几个页面,拿这个audio标签来练练手. 首先你需要向页面中插入 ...

  9. HTML5 Video/Audio播放本地文件

    这段时间经常看到开发者在反复询问同一个问题,为什么通过设置src属性,不能播放本地的媒体文件?例如video.src=”D:\test.mp4”. 这是因为浏览器中的JavaScript不能直接直接访 ...

随机推荐

  1. 没想到即将上线的NGK生态应用这么厉害?!

    话说这即将上线的NGK公链可不是闹着玩的,这条公链的蛰伏时间长达两年,恐怕这个准备时间,连最初的区块链1.0时代的项目都无法比拟,现在的话那都差太远了. 编程一段代码并不难,难的是耐得住赚快钱的心.人 ...

  2. django学习-15.ORM查询方法汇总

    1.前言 django的ORM框架提供的查询数据库表数据的方法很多,不同的方法返回的结果也不太一样,不同方法都有各自对应的使用场景. 主要常用的查询方法个数是13个,按照特点分为这4类: 方法返回值是 ...

  3. Linux进程管理工具Supervisor的安装配置

    目录 Linux进程管理工具Supervisor的安装配置 简介 安装Python包管理工具 安装Supervisor 配置 配置文件参数说明 配置进程管理 启动supervisor 控制进程 交互终 ...

  4. Spring Boot移除内嵌Tomcat,使用非web方式启动

    前言:当我们使用Spring Boot编写了一个批处理应用程序,该程序只是用于后台跑批数据,此时不需要内嵌的tomcat,简化启动方式使用非web方式启动项目,步骤如下: 1.在pom.xml文件中去 ...

  5. DRF的orm多表关系补充及serializer子序列化

    目录 一.控制多表关系的字段属性 1.如何建立基表 2.断开连表关系 3.四种级联关系 二.子序列化 一.控制多表关系的字段属性 1.如何建立基表 要在基表中配置Meta,设置abstract=Tru ...

  6. 第47天打卡学习(单例模式 深入了解CAS 原子引用 各种锁的理解)

    18彻底玩转 单例模式 饿汉式 DCL懒汉模式 探究! 饿汉式  package com.kuang.single; //饿汉式单例 //单例模式重要思想是构造器私有 public class Hun ...

  7. CentOS rpm常用功能记录

    CentOS7主要有rpm和yum这两种包软件的管理.两者有功能上的区别,其中主要区别是:yum使用简单但需要联网,yum会去网上包源去获取所需要的软件包.而rpm的需要做的事情就更细一些,比如我们需 ...

  8. 49元起!魅族Lipro LED灯泡发布:无可视频闪、无积热问题

    转: 49元起!魅族Lipro LED灯泡发布:无可视频闪.无积热问题 魅族智能家居品牌Lipro今日办会,公布一批新品,均面向健康照明领域打造. 魅族强调,Lipro健康照明产品主打博物馆级健康光. ...

  9. 《C++ Primer》笔记 第1章 开始

    输出运算符<< 的计算结果就是其左侧运算对象 std::endl 结束当前行,并将与设备关联的缓冲区中的内容刷到设备中. 程序员常常在调试时添加打印语句.这类语句应该保证"一直& ...

  10. selenium之元素定位的方法(二)

    XPath定位是XML Path的缩写,称为XML路径语言,是在XML文档中查找信息的一种语言,可用来再XML文档中对元素和属性进行搜索.XPath使用路径表达式来选取XML文档中的节点或节点集. X ...