​一、video标签

1.作用：播放视频

2.格式：<video src="视频地址“></video>

3.可添加的属性：

（1）autoplay="autoplay"代表可以在页面中自动播放，不可被用户中断

（2）controls="controls”用于显示视频的控制条

（3）poster="地址“用于播放视频之前显示什么东西（图片）

（4）loop="loop"循环播放该视频（一般广告就是这么放上去的）

（5）preload=预加载视频（演示的为本地视频视频，所以在这里演示不了）注意：preload与autoplay相冲突。

（6）muted=”muted“静音选项

（7）width、height属性，用于设置视频框的大小。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d52_vidoe_labelz</title>

</head>

<body>

<video src="神秘巨星.mp4" controls="controls" poster="image/play_tennis.jpg"  height="500px" width="600px">华盛顿邮报</video>

</body>

</html>

<!--autoplay="autoplay" loop="loop" preload="preload"-->

　　

二、源码

d52_vidoe_label1

地址：https://github.com/ruigege66/HTML_learning/blob/master/d52_vidoe_label1

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.简书：https://www.jianshu.com/u/a9169ca4f1c9（心悦君兮君不知dqr）

4.欢迎关注微信公众号：傅里叶变换

HTML连载8-video标签的更多相关文章

  1. HTML5 audio与video标签实现视频播放，音频播放

    随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...

  2. 巧用transform实现HTML5 video标签视频比例拉伸

    前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...

  3. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  4. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  5. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

  6. video标签的属性和方法总结

    最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...

  7. 解决h5的video标签，android、ipad客户端播放正常，iphone客户端无法播放

    在做html5时插入一个视频播放标签video后,测试时android.ipad客户端播放正常,唯独iphone自带浏览器无法播放. 解决办法: 判断用户所使用客户端访问h5页面时是iphone时,点 ...

  8. HTML 5 video 标签跨浏览器兼容

    <video width="320" height="240" controls>   <source src="movie.mp4 ...

  9. 微信video标签全屏无法退出bug 本文系转载

    安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...

  10. 【HTML5 video】video标签的部分属性解析

    转自:http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Th ...

随机推荐

  1. 对Java字符串的探究

    问题的出发点 在网上看到一道题: 1 String str = new String("abc"); 以上代码执行过程中生成了多少个 String 对象? 答案写的是两个.&quo ...

  2. WPF实现左右移动（晃动）动画效果

    原文:WPF实现左右移动(晃动)动画效果 实现控件或布局的左右移动(晃动)主要用到DoubleAnimation以及Storyboard 布局代码为: <Canvas> <Grid ...

  3. WPF C# 多屏情况下，实现窗体显示到指定的屏幕内

    原文:WPF C# 多屏情况下,实现窗体显示到指定的屏幕内 针对于一个程序,需要在两个显示屏上显示不同的窗体,(亦或N个显示屏N个窗体),可以使用如下的方式实现. 主要涉及到的:System.Wind ...

  4. asp.net (webapi) core 2.1 跨域配置

    原文:asp.net (webapi) core 2.1 跨域配置 官方文档 ➡️ https://docs.microsoft.com/zh-cn/aspnet/core/security/cors ...

  5. Alamofire - 优雅的处理 Swift 中的网络操作

    网络处理,应该是我们平时开发的时候最常用到的操作.比如读取 JSON 数据,下载图片,这些操作都要和网络打交道,一个高效稳定的网络操作库对于提升我们日常的开发效率有着非常关键的作用.Alamofire ...

  6. WPF － 模板查看工具：Show Me The Template及如何查看第三方主题

    原文:WPF - 模板查看工具:Show Me The Template及如何查看第三方主题 在学习WPF的模板(DataTemplate.ItemsPanelTemplate.ControlTemp ...

  7. [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口

    原文:[WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 周银辉 现象: 大家可以试试下面这个很有趣但会带来Defect的现象:当我 ...

  8. 高手问答精选：Go 语言 —— 云计算时代的 C 语言（类似于一个FAQ）

    Go 语言被称为云计算时代的 C 语言,它在软件开发效率和运行效率之间做出了绝佳的权衡.这使得它既适应于互联网应用的极速开发,又能在高并发.高性能的开发场景中如鱼得水.正因如此,许多互联网公司,尤其是 ...

  9. 深入理解Amazon Alexa Skill（三）

    本节来讨论Alexa Skill中涉及到的授权问题. Alexa内功能的授权 Alexa会发给skill用户的token,然后skill代码使用这个token来访问Web API访问用户的Alexa内 ...

  10. AFN小结(简单的封装)

    AFN小结 1,AFN概念.原理 2,AFN的封装使用 3,AFN与其它框架对比 ————————————————————————————————— 1 , AFN的概念原理: AFN的基础是NSUR ...