首页 > 其他分享 >html5添加视频

html5添加视频

时间:2024-09-30 13:33:34浏览次数:7  
标签:视频 播放 添加 video html5 our audio 加载

		<video src="video/puppy.mp4" 
			poster="images/puppy.jpg" 
			width="400" height="300" 
			preload
			controls
			loop>
			<p>A video of a puppy playing in the snow</p>
		</video>
	</body>

src来源
poster加载或播放前显示的图像
width,height宽,高
controls浏览器提供额外控件
autoplay自动播放
loop循环播放
preload:none不点击播放前不加载视频
auto加载
metadata收集少量信息。
	<video poster="images/puppy.jpg" width="400" height="320" preload controls loop>
			<source src="video/puppy.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
			<source src="video/puppy.webm" type='video/webm;codecs="vp8, vorbis"' />
			<p>A video of a puppy playing in the snow</p>
		</video>

type说明视频格式
codecs编码类型
2.audio加载音频
<audio src="audio/test-audio.ogg" controls autoplay>
			<p>This browser does not support our audio format.</p>
		</audio>
3.多个音频源
<audio controls autoplay>
			<source src="audio/test-audio.ogg" />
			<source src="audio/test-audio.mp3" />
			<p>This browser does not support our audio format.</p>
		</audio>

标签:视频,播放,添加,video,html5,our,audio,加载
From: https://www.cnblogs.com/zhongta/p/18441673

相关文章

  • 【PR2024】Adobe Premiere Pro视频编辑软件下载安装与pr教程(附下载链接)
    AdobePremiere简介AdobePremierePro(PR)是由Adobe公司开发的一款专业视频编辑软件,广泛应用于电影、电视、广告、网络视频等领域。该软件提供了完整的视频编辑流程,使用户能够导入、编辑和处理各种视频、音频和图像文件,包括剪辑、裁剪、添加过渡效果、特效、文本、音乐和声音等......
  • Svnlook使用浅谈(配置svn上传必须添加备注和删除权限)
      在配置svn上传必须添加备注和删除权限前,我先隆重介绍下今天用到的svn命令svnlook。svnlook是检验Subversion版本库不同方面的命令行工具,不会对版本库有任何修改,只是查看,包括作者信息、文件内容、更改历史、文件大小、属性等。当然它有自己的独特语法(1)语法格式:svnlookREPOS......
  • CMSIS-RTOS V2封装层专题视频,一期视频将常用配置和用法梳理清楚,适用于RTX5和FreeRTOS(2
    【前言】本期视频就一个任务,通过ARM官方的CMSISRTOS文档,将常用配置和用法给大家梳理清楚。对于初次使用CMSIS-RTOS的用户来说,通过梳理官方文档,可以系统的了解各种用法,方便大家再进一步的自学或者应用,起到授人以渔的作用。更深入的可以看之前分享的RTOS运行机制,任务管理,上下......
  • yolov5视频流实时检测实现
    yolov5https://github.com/ultralytics/yolov5 对rtsp视频流的支持https://github.com/ultralytics/yolov5/blob/master/detect.py @smart_inference_mode()defrun(weights=ROOT/'yolov5s.pt',#modelpathortritonURLsource=ROOT/�......
  • Netflix截屏录屏播放的视频黑屏技术原理
    数字版权管理(DigitalRightsManagement,DRM)奈飞(Netflix)等流媒体平台对截屏或录屏时显示黑屏的现象,主要是通过数字版权管理(DigitalRightsManagement,DRM)技术实现的。技术原理:DRM保护:奈飞使用了名为Widevine或PlayReady等DRM技术,这些技术确保在播放受版权保护的内容时,限制......
  • 音视频接口
    1音视频接口  各代音视频接口:第一代CVBS、第二代S-Video、1987年第三代VGA、1999年第四代DVI、2002年第五代HDMI;  每种接口背后都有自己的历史背景,在此不去深究,只是简单概括;除去下面接口外还有SDI接口,雷电接口,先放着;    1.1CVBS接口    CVBS:compositevediob......
  • RTE 大会报名丨智能编解码和 AI 生成视频 ,RTE2024 技术专场第五弹!
       AI视频的爆炸增长,给新一代编解码技术提出了什么新挑战? 语音AI实现human-like的最后一步是什么? 当大模型进化到实时多模态,又将诞生什么样的新场景和玩法? 所有AIInfra都在探寻规格和性能的最佳平衡,如何构建高可用的云边端协同架构? AI加持下,空间计算......
  • 视频格式转换 CoolUtils Total Movie Converter v4.1 中文授权版
    CoolUtilsTotalMovieConverter 是一款适用于PC端的视频格式转换软件,支持转换几乎所有常见的视频格式。无论你需要将视频转换为AVI、FLV、MPG、WMV、MPEG等格式,还是想将视频优化用于XBox、iPhone、iPad等设备,这款工具都能帮你实现。新版添加了“VideoToDevice”功能,确......
  • 剪辑必备|分享18个免费可商用的视频素材网站!
    作为一名剪辑师,俺也经常会用到一些素材站点,但是不少大佬回答的视频素材站点已经关停或者没有再更新了!所以俺把将近300个网站都测试了下,发现还有下面有用的站点,免费商用和正版商用的都有,写得不好大家也多多指点哦,话不多说,一起看看目前国内外主流的视频素材库!1、摄图视频官网......
  • 有些硬盘录像机接入视频汇聚平台EasyCVR后通道不显示/显示不全,该如何处理?
    EasyCVR视频监控汇聚管理平台是一款针对大中型项目设计的跨区域网络化视频监控集中管理平台。该平台不仅具备视频资源管理、设备管理、用户管理、运维管理和安全管理等功能,还支持多种主流标准协议,如GB28181、RTSP/Onvif、RTMP、部标JT808、GA/T1400协议等,以及厂家的私有协议和SDK......