video 标签

已于 2022-08-26 16:27:51 修改
阅读量2.9k 收藏 7
点赞数
分类专栏： HTML / H5 文章标签： 音视频 前端 javascript
于 2020-07-19 19:40:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40340943/article/details/107449941
版权

一，video介绍

1，在H5之前要想在网页中播放视屏，需要相关的插件，例如flash。H5集成了视频组件video，可以轻松的在网页上添加视频。

2.在 <video></video> 标签中间的内容，是针对浏览器不支持此元素时候的降级处理。

3.video有默认的宽高，不设置宽高，则以默认的宽高展示。

二，video标签的属性

在这里插入图片描述

三，video标签支持的方法

在这里插入图片描述

四，video标签支持的事件

在这里插入图片描述

六，注意事项

1.谷歌浏览器和火狐浏览器现在都不支持非静音自动播放了，要让autoplay生效，需要给video标签加上muted（静音）属性

2.要让视频铺满video，需要设置object-fit: cover

 <video style="object-fit: cover" autoplay loop muted >
      <source src="/resources/images/login/bg.mp4" type="video/mp4" />
 </video>
诗人远行
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Video标签事件与属性
weixin_30873847的博客
06-22 1539
事件与属性 属性 描述 audioTracks 返回可用的音轨列表（MultipleTrackList对象） autoplay 媒体加载后自动播放 buffered 返回缓冲部件的时间范围(TimeRanges对象) controller 返回当前的媒体控制器（MediaController对象） controls 显示播控控件 cross...
cefsharp57支持video标签
11-15
4. **使用video标签**：在HTML代码中，通过`<video>`标签插入视频。例如： ```html <video width="320" height="240" controls> <source src="myVideo.mp4" type="video/mp4"> Your browser does not support ...
HTML5 Audio/Video 标签,属性,方法,事件汇总
killerover84的专栏-----天下
04-14 3007
标签属性： src：音乐的URLpreload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条 Html代码  id=”media” src=”http://www.abc.com/test.mp3″ controls>   标签属性： src：视频的URLposter：视频封面，没有播放时显示的图片pre
HTML5 ＜video＞常用属性、时间、方法及基础使用说明
m0_67793437的博客
06-12 1185
标签也可用于播放音频，但播放音频用更加适合。MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件基础写法
关于video音频标签的有关事件
紫月i的博客
11-22 554
//获取视频DOM元素 var myVideo = document.getElementById("myVideo"); //监听播放开始 myVideo.addEventListener('play',function(){ console.log("开始播放"); }); //监听播放结束 myVideo.addEventListener('pause',function(){ console.log("播放暂停"); }); //监听播放结束 myVideo.addEve.
video标签属性及其事件
Hupan_Pan的博客
08-25 1837
<!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" controls controlslist="nodownload" width="400" height="300">&lt...
Video标签的属性和事件
a124550785的博客
08-04 1002
1.属性 <!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" controls controlslist="nodownload" width="400" height="300"
解决video标签在安卓webview下无法自动播放问题
09-04
在Android平台上，Web开发人员经常会遇到一个问题，那就是`<video>`标签在WebView中无法自动播放。这主要是由于Android系统的安全性和用户体验考虑，防止媒体内容在未经用户交互的情况下自动播放，可能会消耗流量或...
HTML页面原生VIDEO标签隐藏下载按钮功能
09-28
本文将详细介绍如何通过CSS来隐藏`<video>`标签内的下载按钮。 在默认情况下，浏览器会为`<video>`标签生成一套内置的媒体控制面板，其中包括播放、暂停、音量以及下载按钮。要隐藏下载按钮，我们可以利用浏览器...
H5的video标签跨域.HTML的video标签跨域_跨域ajax
12-24
H5的video标签跨域.HTML的video标签跨域 我们都知道HTML video标签能播放视频 但是如果你的video要播放的是非当前域名下的视频文件,这就要跨域播放视频, 应该如何实现呢?
html5用video标签流式加载的实现
11-20
video标签 浏览器的video标签通常是接收一个src属性，然后浏览器就会根据这个src属性来自动加载视频。 这个过程是浏览器来加载video的。 这种方式有什么问题吗？ mp4文件不能流式加载 webm，flv，hls等格式兼容性...
HTML5 Video标签的属性、方法和事件汇总介绍
06-30
Media方法和属性： HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement Media.error; //null:正常 Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效 //网络状态 - Media.currentSrc; //返回当前资源的URL
video标签的属性和事件用法大全
极客神殿
07-29 3425
1、video 属性 <!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" controls controlslist="nodownload" width="400" height="
【JavaScript】video标签配置及相关事件：
SunPeng的博客
09-18 1786
【JavaScript】video标签配置及相关事件：
音视频-Video标签整理（属性、方法、事件）
weixin_43909743的博客
06-07 2161
前言 啊嘞啊嘞，没想到哎，video原生标签可以在手机端进行hls流直播（电脑端不可以，需要使用播放器），神奇 使用 <video id="video" :poster="imgurl" :src="url" autoplay controls="controls" ></video> 标签可设置属性 src ：视频的属性 poster：视频封面，没有播放时显示的图片 preload
HTML5 video 标签属性、API 方法、事件、自定义样式详解与实用示例
JINGWHALE
04-17 5451
HTML5 video 标签为网页内嵌视频提供了强大且便捷的功能。本文对 video 标签的主要属性、API 方法、事件、自定义样式及其使用示例的详细介绍。
Video标签属性、对象属性、对象方法、以及对象事件有哪些
Bunny的博客
12-20 1607
元素还有一些可以通过 JavaScript 进行访问和控制的对象属性，比如： 元素也有一些可以通过 JavaScript 调用的方法，比如： 元素支持一些事件，可以在 JavaScript 中对其进行监听，比如：
html5语法下的video标签，如何通过 ontimeupdate事件来记录当前视频播放的时间点
最新发布
阿酷tony
06-12 255
html5语法下的video标签，如何通过 ontimeupdate事件来记录当前视频播放的时间点。html5语法下的video标签，如何通过 ontimeupdate事件来记录当前视频播放的时间点
vue video标签
08-30
Vue中的video标签用于在网页上展示视频内容。你可以使用以下方式在Vue中使用video标签： 1. 首先，确保你已经在Vue项目中引入了Vue库。 2. 在你想要展示视频的组件中，使用video标签并设置相应的属性。 例如，下面是一个简单的Vue组件，展示了一个video标签： ```vue <template> <div> <video controls> <source src="your_video_url_here" type="video/mp4"> Your browser does not support the video tag. </video> </div> </template> <script> export default { // 组件的其他属性和方法 } </script> <style> /* 可以添加一些样式来调整视频的布局和外观 */ </style> ``` 在上面的代码中，我们使用了`<video>`标签来创建一个视频容器，`controls`属性用于显示视频控制条。你可以通过`<source>`标签指定视频的URL和媒体类型。 确保将`your_video_url_here`替换为你自己视频的URL。另外，如果浏览器不支持video标签，会显示在`<video>`和`</video>`之间的文本。 这只是一个简单的例子，你还可以通过添加其他属性和事件来进一步自定义视频的行为和样式。希望对你有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值