麦田的博客

HTML5网页视频代码和音频代码

2015-06-05


HTML5已经成为主流,一段简单的HTML5代码就可以实现在网页上播放视频和音频。

在网页播放视频的HTML5代码如下

<video width="480" height="auto" controls>
<source src="你的视频网址.mp4">
</video>

html5视频代码播放实例如下:

推荐使用MP4格式的视频文件,视频编码必须为H.264,建议使用格式工厂,或者爱剪辑转换视频编码。


在网页播放音乐歌曲音频的HTML5代码如下

<audio controls="controls">
  <source src="你的音频网址.mp3" type="audio/mp3" />
</audio>

html5音频代码播放实例如下:

2019年9月15日更新:

本文写自2015年,那个时候有些浏览器还不兼容html5。现在已经到2019年,以上简洁的html5视频代码已经能很好的兼容几乎所有浏览器。

所以以下兼容的技术内容不必看,因为已经被淘汰!

相关内容:

Markdown添加视频 - hugo和hexo添加视频

hugo和hexo添加音乐音频


IE8以及更低的IE版本不支持HTML5,兼容的方法如下

首先在页面的head部分加入如下脚本

再使用前面的音频视频代码即可,经过实测,播放正常。

这个代码的作者是Dave Hall,感谢他的免费提供,参考网站:https://html5media.info/(有教程)

他的网站在国外,应用于国内网站肯定有延迟,建议下载他的代码上传到自己的服务器。

或者直接使用麦田下载的:

再次感谢作者Dave Hall


以上是推荐方法,国人有类似的服务,但比上面的那个复杂些,而且有些不合理的地方。

比如CKPlayer,不能设置视频的尺寸大小;

比如CUPlayer,基础版本不支持移动设备,全功能版本需要几百元…


2018年10月10日更新:

以上视频代码简单高效,一直使用正常,但是最近发现有的网站不兼容,手机打开网页后,视频只显示一个黑点,或者被拉升得很大。

经过搜索,找到另外一个html5的视频代码:Video.js

这个视频代码兼容性更好!

以上加到 之前,以下放在正文:

/视频封面/

本方案的官网:https://videojs.com/

BootCDN:https://www.bootcdn.cn/video.js/


2019年6月5日更新

以上两个方案都可以,第一个方案目前没有瑕疵,但是遇到个新问题:

在配置正常的情况的,小米浏览器打开网页,视频显示一个小黑点,其他浏览器打开正常。

经过排查发现,是因为没有指定视频的宽度。

错误示例:

正确:

如果你的视频尺寸小,或者尺寸多,建议视频宽度设置为480或者320,高度设置成auto,这样显示界面比较好。

以下是一个小时之前的错误观点:

经过排查发现,我的视频网址原来被小米浏览器列为恶意网站(此网站存在安全隐患,可能为恶意网站),引用这个网址不加载视频,也没有错误提示。


相关内容

  • DIVCSS的class和id的区别
  • css字体大小单位介绍和转换对照表
  • Markdown添加视频(hugo和hexo添加视频)
  • 怎么下载YouTube上的视频
  • 分割线样式参考
  • 网站统计代码介绍和推荐
  • 网页跳转代码
  • HTML5点击按钮复制文字的代码
  • 手机网页点击拨打电话的代码
  • css文字自动换行
  • 标签

    HTML5视频视频代码音频代码代码html