菜鸟教程学习——HTML5 video，audio,input(各种新元素)，output,datalist

最新推荐文章于 2023-07-26 20:52:15 发布
原创 最新推荐文章于 2023-07-26 20:52:15 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了HTML5中的多媒体元素<video>和<audio>，包括支持的视频和音频格式，如MP4, WebM, Ogg。还展示了如何在Hbuilder中使用这些元素，并提供了播放/暂停、尺寸调整等操作的示例代码。此外，文章还提及了HTML5的新表单输入类型如color、date等，并讲解了<output>和<datalist>元素的用法。" 109273637,10155034,完全卸载macOS应用：手动 vs 使用工具,"['mac', 'macos', '卸载工具', '应用程序管理']

<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:即

  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

但是Hbuilder中有这八个选项：

网站示例：

可以暂停，放大。

同时可以添加这几个方法对视频进行操作：

  <button οnclick="playPause()">播放/暂停</button> 
  <button οnclick="makeBig()">放大</button>
  <button οnclick="makeSmall()">缩小</button>
  <button οnclick="makeNormal()">普通</button>


                

        

    



  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
我们一起学：HTML5标签系列教程（一）-video标签

				
			

			

				

					2401_83330193的博客
				

				

					03-30
					
					1284
					
				

			

		

		

			
				
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题总结来说，面试成功=基础知识+项目经验+表达技巧+运气。

			
		

	



                

            
              



	

		

			

				
					
菜鸟笔记九：video

				
			

			

				

					CZW2181119177的博客
				

				

					06-20
					
					473
					
				

			

		

		

			
				
属性
			值
			说明
		src
			url
			要播放视频的URL
		autoplay
			autoplay
			视频就绪后立即播放
		controls
			controls
			添加播放、暂停和音量等控件
		width
			像素
			设置视频播放器的宽度
		height
			像素
			设置视频播放器的高度
		loop
			loop
			设置视频是否循环播放
		prelood
			
			auto、none

			metadata
			
			视频在页面加载

			
		

	



              


  
              

                


	

		

			

				
					
video 自定义视频播放控件

					
热门推荐

				
			

			

				

					细节怪的博客
				

				

					02-21
					
					1万+
					
				

			

		

		

			
				
自定义视频播放控件，控件位置可随意放置

			
		

	





	

		

			

				
					
video-01-详解使用和属性说明

				
			

			

				

					大雾起了清晨
				

				

					06-28
					
					1716
					
				

			

		

		

			
				
video标签可以通过简单的属性设置来进行视频播放，我们初学可以先做简单学习，但是高级操作就需要video对象来完成高阶玩法

			
		

	



		

			
		



	

		

			

				
					
html5播放视频菜鸟,HTML5 video标签（播放器）学习笔记（二）:播放控

				
			

			

				

					weixin_29070861的博客
				

				

					06-16
					
					831
					
				

			

		

		

			
				
这篇文章主要介绍了HTML5 video标签(播放器)学习笔记(二):播放控制,本文讲解了获取影片总时长、播放、暂停、获取影片的播放时间和设置播放点、音量的获取和设置等内容,需要的朋友可以参考下上一篇介绍了html5标签video(播放器)初始化需要做的一些工作，如何简单快速使用html5的播放器，本文将重点介绍如何用JS来操作video标签，也就是如何对video做一些简单基本的操作，包括了播放...

			
		

	





	

		

			

				
					
video+src+html,HTML video src 属性 | 菜鸟教程

				
			

			

				

					weixin_33290540的博客
				

				

					06-17
					
					390
					
				

			

		

		

			
				
HTML  src 属性实例播放一个视频：您的浏览器不支持 video 标签。尝试一下 »浏览器支持所有主流浏览器都支持 src 属性。但是定义的文件格式并不是所有浏览器都支持。注意： Internet Explorer 8 及更早IE版本不支持  标签。定义和用法src 属性指定 video 文件的本地路径(URL) 。以上实例使用了 Ogg 文件, 该使用可正常显示于 Firefox, Ope...

			
		

	





	

		

			

				
					
HTML5中文学习教程：从入门到精通

				
			

			

				

					
				

			

		

		

			
				
"这是一份全面的HTML5中文学习教程，涵盖了从基础到高级的各种HTML5特性，包括新的标签、音频、视频、Canvas、Web存储、输入类型、表单元素和属性等内容，旨在帮助初学者掌握HTML5的核心知识。教程分为多个章节，...

			
		

	





	

		

			

				
					
《HTML5从入门到精通》中文学习教程

				
			

			

				

					11-12
				

			

		

		

			
				
4. **表单控件增强**：HTML5新增了多种表单输入类型（如`<input type="date">`, `<input type="range">`等），以及`<datalist>`、`<output>`等元素，提高了表单的可用性和交互性。  5. **Geolocation API**：允许...

			
		

	





	

		

			

				
					
html5 audio菜鸟,html5，audio音乐播放器

				
			

			

				

					weixin_39581739的博客
				

				

					06-17
					
					305
					
				

			

		

		

			
				
终于，做了自己原来一直想要实现的事儿，得出的结果是，有些事儿一旦开始做了，那么它就并不是很难。现在的我，正听着自己的播放器放出的《光辉岁月》写这篇周六清晨的博文。写的不是很好，但也请各位前辈担待一下我这个什么都不懂的菜鸟，也希望各位前辈积极地指正我的错误，小弟感激不尽！本项目主要用到了html5的audio标签以及它所自带的方法和属性，IE9+浏览器兼容。值得一提的是，在项目中，遇到了这样的一个问...

			
		

	





	

		

			

				
					
HTML5新特性:语义化标签,多媒体标签,音频-audio,input属性,表单属性

				
			

			

				

					dream_vk的博客
				

				

					05-16
					
					495
					
				

			

		

		

			
				
1.HTML5新特性
1.1HTML新增语义化标签
header:头部标签
nav:导航标签
article:内容标签
section:定义文档某个区域
aside:侧边栏标签
footer:尾部标签
1.2 HTML5新增的多媒体标签
1.视频 video 常见属性
属性		值					描述
autoplay	autoplay			视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls			向用户显示播放控件
width		pixels(像素)		设置播放器

			
		

	





	

		

			

				
					
html audio读取绝对路劲音乐文件,HTML audio src 属性 | 菜鸟教程

				
			

			

				

					weixin_26850469的博客
				

				

					06-03
					
					1274
					
				

			

		

		

			
				
HTML  src 属性实例播放音频:您的浏览器不支持 audio 元素。尝试一下 »浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 浏览器都支持 src 属性。。但是不是有的浏览器都支持音频的文件格式。注意： Internet Explorer 8 及更早 IE 版本不支持  标签。定义和用法src 属性描述了音频文件的地址...

			
		

	





	

		

			

				
					
十二、HTML5新增标签特性详解（audio、video、input）

				
			

			

				

					zep
				

				

					05-06
					
					996
					
				

			

		

		

			
				
HTML5  第一天
一、什么是 HTML5

HTML5 的概念与定义


定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
两个概念：

是一个新版本的 HTML 语言，定义了新的标签、特性和属性
拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5




HTML5 ...

			
		

	





	

		

			

				
					
HTML5学习，常用常记（Video，Audio，Input）

				
			

			

				

					Sinhaeng_Hhjian
				

				

					03-07
					
					650
					
				

			

		

		

			
				
检测您的浏览器是否支持 HTML5 视频；


&lt;video width="320" height="240" controls&gt;
	&lt;source src="movie.mp4" type="video/mp4"&gt;
	&lt;source src="movie.ogg" type="video/ogg"&gt;
	您

			
		

	





	

		

			

				
					
HTML5的新特性——语义化标签、多媒体标签（video、audio）、input类型、表单属性

				
			

			

				

					qq_43623147的博客
				

				

					12-15
					
					784
					
				

			

		

		

			
				
HTML5新增的语义化标签

<header>：头部标签
	<nav>：导航标签
	<article>：内容标签
	<setion>：定义文档某个区域
	<aside>：侧边栏标签
	<footer>：尾部标签


注意：

这种语义化标准主要是针对搜索引擎的
	这些新标签页面中可以使用多次
	在IE9，需要把这些元素转换为块级元素
	移动端更喜欢使用这些标签
HTML5新增的多媒体标签

新增的多媒体标签主要包含两个：

音频：&l.

			
		

	





	

		

			

				
					
【前段开发】菜鸟必看，大佬绕道，video标签的封面，记得要用哦

				
			

			

				

					有一棵树的博客
				

				

					12-16
					
					894
					
				

			

		

		

			
				
【预警*** 前端菜鸟***仅作记录使用***不对的地方请多指正】

现在记录一个简单的问题，关于video标签的使用。

1，在一个普通网页中嵌入一个视频方法很简单


<video controls>
    <source src="视频地址" type="video/mp4>
</video>

在电脑上现实看起来没问题，但是在手机上视频没有播放的以后会黑屏，所以我们需要给视频增加一个封面，使用属性poster 即可，尽量都加吧


<video contr

			
		

	





	

		

			

				
					
【菜鸟Opencv 3】-VideoWriter的用法 视频输出

				
			

			

				

					31号楼的某个房间
				

				

					03-27
					
					2689
					
				

			

		

		

			
				
【菜鸟学Opencv 3】 转载请注明出处


    在Opencv中经常会用到视频的输出  
    最简单的方法是使用   VideoWriter类
class CV_EXPORTS_W VideoWriter
{
public:
    CV_WRAP VideoWriter();
    CV_WRAP VideoWriter(const string& filename, i

			
		

	





	

		

			

				
					
video详解(超全面精细讲解)

				
			

			

				

					qq_54896194的博客
				

				

					07-26
					
					2345
					
				

			

		

		

			
				
用来展示视频文件。目前支持三种视频格式： MP4, WebM, 和 Ogg；

			
		

	





	

		

			

				
					
设置input[type=range] 左右背景样式

					
最新发布

				
			

			

				

					07-05
				

			

		

		

			
				
要修改 HTML 中 `<input type="range">` 控件的左右两侧背景样式，需要使用 CSS 伪元素来分别针对滑块轨道的不同部分进行样式定义。由于浏览器对 `<input type="range">` 的默认样式支持不一，因此需使用特定的伪元素选择器以确保兼容性。

### 修改 `<input type="range">` 左右两侧背景颜色或样式的实现方式

#### 1. 针对 Webkit 浏览器（如 Chrome、Edge）

在 Webkit 浏览器中，可以使用 `::-webkit-slider-runnable-track` 伪元素来控制整个轨道的样式，并通过额外的 `background` 设置左右两侧的颜色渐变。

```css
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, #ff0000 50%, #0000ff 50%);
  border-radius: 5px;
}
```

上述代码将左侧设置为红色（`#ff0000`），右侧设置为蓝色（`#0000ff`）[^4]。

#### 2. 针对 Firefox 浏览器

Firefox 使用 `::-moz-range-track` 伪元素来控制轨道样式。

```css
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, #ff0000 50%, #0000ff 50%);
  border-radius: 5px;
}
```

同样地，左侧是红色，右侧是蓝色。

#### 3. 针对 IE 浏览器

Internet Explorer 支持 `::-ms-thumb` 和 `::-ms-track` 伪元素，但其样式控制能力有限，可以通过设置整体背景色并结合渐变实现类似效果。

```css
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
  background: linear-gradient(to right, #ff0000 50%, #0000ff 50%);
  border-radius: 5px;
}
```

### 完整示例代码

以下是一个完整的 HTML 示例，展示了如何跨浏览器修改 `<input type="range">` 控件的左右两侧背景颜色：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      background: transparent;
    }

    /* Webkit */
    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 10px;
      background: linear-gradient(to right, #ff0000 50%, #0000ff 50%);
      border-radius: 5px;
    }

    /* Firefox */
    input[type=range]::-moz-range-track {
      width: 100%;
      height: 10px;
      background: linear-gradient(to right, #ff0000 50%, #0000ff 50%);
      border-radius: 5px;
    }

    /* IE */
    input[type=range]::-ms-track {
      width: 100%;
      height: 10px;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }

    input[type=range]::-ms-fill-lower,
    input[type=range]::-ms-fill-upper {
      background: linear-gradient(to right, #ff0000 50%, #0000ff 50%);
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <input type="range" min="0" max="100">
</body>
</html>
```

### 注意事项

- 不同浏览器对 `<input type="range">` 的支持和渲染方式存在差异，建议在多个浏览器中测试最终效果。
- 如果需要更复杂的样式（如阴影、边框等），可以在 `linear-gradient` 或 `background` 属性中进一步调整。
- 某些浏览器可能无法完全支持所有 CSS 特性，因此建议提供一个基本样式作为回退方案。

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值