使用HTML和css播放视频和音频

  • 使用video播放视频
    • 使用audio播放音频

使用video播放视频

video属性可以给网页加载视频,详细属性见下图

不是所有格式的视频都可以被浏览器支持,比如IE就不支持Ogg格式
具体写法为:

<video src="文件地址" controls="controls"  ></video>

1.可以在地址后面加你想要的限制条件,比如上面的controls就是添加播放控件的意思
2.部分浏览器是不支持自动播放的,想要他播放就在后面加个静音muted就可以了
3.有的可以只写属性而不写属性值,比如autplay,但为了程序的顺利运行建议都写。

如果需要考虑视频播放页面的大小,只需要把video看成一个盒子即可,然后按照盒子的写法,给它设置位置即可。
比如:
css:

video{
width:100%;
height:100%;
}

html:

<video src="文件地址" controls="controls"  ></video>

需要考虑到兼容性的可以用以下代码

<video controls="controls">
<source src="happy.mp4" type="video/mp4">
<source src="happy.ogg" type="video/ogg">
您的浏览器不支持video格式
</video>

意思是先用MP4格式,如果不支持就用Ogg格式,如果都不支持就直接说:您的浏览器不支持video格式。
这里的happy是视频文件。

使用audio播放音频

音频与视频的使用格式基本一样,具体写法也只是把video改成audio

然后,常用浏览器与它的支持格式如下图所示

使用HTML和css播放视频和音频相关推荐

  1. Unity3D VideoPlayer播放视频和音频

    Unity3D VideoPlayer播放视频和音频 今天来记录一下用Unity自带的VideoPlayer播放视频和音频. 首先准备一个带音频的视频文件,导入到工程中.Windows支持的视频格式有 ...

  2. 安装了Phonon,却不能播放视频和音频

    安装了Phonon,却不能播放视频和音频,同时提示警告: WARNING: bool Phonon::FactoryPrivate::createBackend() phonon backend pl ...

  3. android点击视频使用固定应用打开,Android 使用intent打开手机自带应用播放视频,音频,文档,还有打开应用市场...

    1 打开手机上的视频播放器播放视频String url = "http://192.168.0.1/1.mp4" Intent intent = new Intent(); int ...

  4. Qt的QMediaPlayer播放视频和音频

    这里只是做简单的测试,功能简单,代码如下: QVBoxLayout *layout = new QVBoxLayout; QVideoWidget* vw = new QVideoWidget(); ...

  5. 播放视频和音频文件java

    import javazoom.jl.player.Player; import org.junit.jupiter.api.Test; import java.io.BufferedInputStr ...

  6. 网页不能自动播放视频、音频的解决方案

    至于原因,就是谷歌以及基于 Chromium 开发的浏览器自身限制,出发点是影响用户体验,想想也是,万一,一不小心点开哪个网页,突然播放一些乱七八糟的声音,而且特别大声,估计谁也受不了. 考虑到目前地 ...

  7. HTML 关闭优酷自动播放,Disable HTML5 Autoplay插件,禁止页面自动播放视频和音频

    Disable HTML5 Autoplay插件的功能简单且实用,安装插件后即可在网页上禁用HTML5音频和视频自动播放. 多年以来,许多网站都使用的Adobe Flash等软件来展示视频,而许多浏览 ...

  8. 视频和音频播放的演示最简单的例子9:SDL2广播PCM

    ===================================================== 最简单的视频和音频播放的演示样品系列列表: 最简单的视音频播放演示样例1:总述 最简单的视音 ...

  9. 关于使用QML的MediaPlayer实现视频和音频的播放时遇到的一些坑

    开门见山,最近在做一款桌面软件送人的时候,需要用到背景音乐以及视频的播放,在这个过程中,涉及到操作QML的MediaPlayer,但是我当我想要将loops属性改为MediaPlayer.Infini ...

最新文章

  1. Python Django 一对多之插入多条数据示例
  2. lm723大电流可调电源电路图_TE:大电流电源连接器
  3. ProxySQL MySQL MGR8配置
  4. 介绍一下 information_schema 库
  5. eclipse中tomcat服务器locations不能修改,解决eclipse中Tomcat服务器的server location选项不能修改的问题...
  6. 放大电路分析方法、图解法分析放大电路
  7. sql 没有调试 菜单_关于ThinkPHP5.1+的Log无法记录SQL调试记录的小经历
  8. java putall实现_java putAll与addAll的小区别
  9. Atitit mysql存储过程编写指南 1. 定义变量 1 1.1. 变量名以@开头用户变量 会话变量 1 1.2. 以declare关键字声明 存储过程变量 2 1.3. @是用户自定义变量,
  10. REC Solar推出黑色多晶半切片PERC组件,已进入量产化
  11. [云原生专题-11]:容器 - 如何构建自己的docker镜像:Docker Dockerfile
  12. 自制纯正弦波 12V转220V 1000瓦逆变器做家用太阳能电源
  13. 1.12 Cubemx_STM32F4 步进电机(四)----S曲线理论
  14. 修改域名需要重启服务器,GitLab修改域名host
  15. owt-conference 视频会议流程
  16. Python3脚本抢票
  17. 【20190405】算法-输入一个字符串,按字典序打印出该字符串中字符的所有排列
  18. Matlab画柱状、饼状填充图(亲测可用)
  19. php5漏洞汇总,ThinkPHP 5.x RCE 漏洞分析与利用总结
  20. iOS灵动岛【电商秒杀】开发实践

热门文章

  1. responsive web design plugin collection
  2. 手动打开数据库,新版phpstudy启动MySQL命令符图解过程
  3. smark的简单介绍
  4. 添加背景音乐java,支持mp3
  5. 对卷积物理意义的理解
  6. FFmpeg和SDL教程(五):同步视频
  7. 为 NuGet 指定检测的 MSBuild 路径或版本,解决 MSBuild auto-detection: using msbuild version 自动查找路径不合适的问题
  8. 基于java web新生入学报到系统
  9. 新手助手、新生报到小程序 毕业设计毕业论文 开题报告和效果图参考(基于微信小程序毕业设计题目选题课题)
  10. uni-app库lottie-miniapp使用方法