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

麦田7年前 (2015-06-05)工作笔记369

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


在网页播放视频的HTML5代码


<video width="480" height="auto" controls>

<source src="你的视频网址.mp4">

</video>


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


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


<audio controls="controls">

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

</audio>


---


2019年9月15日更新:


本文写自2015年,那个时候有些浏览器还不兼容html5。现在已经到2019年,以上简洁的html5视频代码已经能很好的兼容几乎所有浏览器。所以兼容的技术内容不必看,因为已经被淘汰!


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


首先在页面的head部分加入如下脚本,再使用前面的音频视频代码即可,经过实测,播放正常。


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


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


以上是推荐方法,国人有类似的服务,但比上面的那个复杂些,而且有些不合理的地方。比如CKPlayer,不能设置视频的尺寸大小;比如CUPlayer,基础版本不支持移动设备,全功能版本需要几百元…


2018年10月10日更新:


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


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


这个视频代码兼容性更好!以上加到 之前,以下放在正文:


 /视频封面/


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


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


2019年6月5日更新


以上两个方案都可以,第一个方案目前没有瑕疵,但是遇到个新问题:在配置正常的情况的,小米浏览器打开网页,视频显示一个小黑点,其他浏览器打开正常。经过排查发现,是因为没有指定视频的宽度。


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

相关文章

点击链接打开随机页面的代码

常规的HTML页面,点击链接、图片或者页码到下一页,比较沉闷,点击链接打开随机页面就不同。经过搜索和测试,以下代码可以用,而且很好用:<a href="#" onclick=...

百分浏览器使用经验

1、 浏览器的书签和保存的网站密码需要备份;2、百分浏览器导出和导入网站密码;导出方法:在浏览器的自动填充和密码设置中导出密码,是csv格式;导入方法:浏览器的密码导入功能默认是关闭的,打开方法是右键...

分割线样式参考

分割线在网页中应用比较多,列举常规的分割线如下:1、最基础的分割线:<hr>或者<hr />,默认颜色是#9A9A9A,默认厚度是22、基础分割线:# 位置可选左右中,可选线条...

Hugo生成静态网页有大量空行怎么办

Hugo生成静态网页后,查看HTML网页源代码发现,里面有大量的空行,虽然前台显示正常,但是这些空行都应该被消灭掉!据说,不只是Hugo,Jekyell默认情况下也有同样的现象。这个问题一般是因为空元...

静态博客生成器大全和简评

根据静态博客生成器排行榜网站staticgen,将主流的程序列出如下,并简评备忘:第一名:Next.js,依赖Node.js,安装简单,一次安装成功,但是使用麻烦;第二名:Jekyll,安装简单,在深...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。