IT辅导娱乐网| 蜘蛛地图| 所有文章|
html5 video标签如何使用 - IT辅导
  • 首页
  • IT技术 IT辅导资源网设计图
    • DVWA靶场
    • sqli-lab靶场
  • 源码基地
  • 软件分享 IT辅导资源网设计图
    • 辅助软件
  • emlog教程
  • 白嫖活动
  • 网络技巧 IT辅导资源网设计图
    • seo教程
  • 编程教程
  • 值得看一看 IT辅导资源网设计图
    • 值得听一听
    • 读懂世界
    • 活动线报
  • 更多功能 IT辅导资源网设计图
    • 在线投稿
    • 公告动态
    • 广告合作
    • 匿名投稿


登录后,享受更多优质服务哦
IT辅导资源网站长qq头像
欢迎回来,可爱的会员!个人中心退出登录
导航菜单
  • 首页
  • IT技术
    • DVWA靶场
    • sqli-lab靶场
  • 源码基地
  • 软件分享
    • 辅助软件
  • emlog教程
  • 白嫖活动
  • 网络技巧
    • seo教程
  • 编程教程
  • 值得看一看
    • 值得听一听
    • 读懂世界
    • 活动线报
  • 更多功能
    • 在线投稿
    • 公告动态
    • 广告合作
    • 匿名投稿

html5 video标签如何使用

2020/9/9 五年级扛把子 

一、定义和用法

<video> 标签定义视频,比如电影片段或其他视频流。 

<video>是html5中的新标签。

二、实例代码

<!DOCTYPE HTML>
<html>
<body>

<video src="视频文件位置" rel="external nofollow" rel="external nofollow" rel="external nofollow" controls="controls">

您的浏览器不支持 video 标签。

</video>

</body>
</html>

controls属性告诉浏览器要有基本播放控件。

三、标签熟悉

1、width和height设置视频窗口大小  。

<video src="视频文件位置" rel="external nofollow" rel="external nofollow" rel="external nofollow" controls="controls" width="400"height="300">  </video>

2、preload设置媒体文件预加载情况。 

(1)值为auto:让浏览器自动下载整个文件 

(2)值为none:让浏览器不必预先下载文件 

(3)值为metadata:让浏览器先获取视频文件开头的数据块,从而足以确定一些基本信息。

3、autoplay自动播放。

(1)autoplay属性使浏览器加载完视频文件后立即播放。

<video src=" 视频文件位置  " controls="controls"  autoplay=“autoplay”></video>

(2)若启用自动播放,可以将播放器设置为muted状态。这样自动播放时会处于静音状态。用户根据需要点击播放器扬声器图标重新打开声音。

<video src=" 视频文件位置  " controls="controls"  autoplay=“autoplay”  muted=“muted”></video>

4、loop循环播放  

loop属性让视频播放结束时,再从头开始播放。 

 <video src="视频文件位置" rel="external nofollow" rel="external nofollow" rel="external nofollow" controls="controls" loop=“loop”></video>

5、poster设置替换视频的图片(封面图片) 

poster属性可以设置,浏览器在下面三种情况下会使用这个图片: 
(1)视频第一帧未加载完毕 
(2)把preload属性设置为none 
(3)没有找到指定的视频文件

<video src=" 视频文件位置  " controls="controls"  poster="替换图片"></video>








 点赞:0  打赏  分享  海报

  • 打赏支付宝扫一扫
  • 打赏微信扫一扫
  • 打赏企鹅扫一扫
结束语
温馨提醒:如有技术问题以及资源失效请联系站长 QQ89549822 进行反馈!!!
 您阅读本文耗时: 0小时02分35秒
热度:310° 发布时间:2020年9月9日

推荐:

标题:html5 video标签如何使用

链接: https://www.itfd.cn/post-1282.html

版权:转载请注明来源于【IT辅导娱乐网】为原创

上一篇: javascript:void(0)是什么含义?

下一篇: HTML5的新特性有哪些!

作者头像 作者名称 作者性别
五年级扛把子
联系作者 作者主页

热门推荐

1 什么是vue,为什么要使用vue
2 it,工作空闲,不玩手机的话,你们会做什么
3 java继承特性详解
4 Redis操作命令详解
5 Redis字符串数据结构简介及其常用命令
6 Java实现时间转换的工具类,源码奉上

评论列表

取消回复

  • 存档

    • 2020年9月(191)
    • 2020年8月(92)
    • 2020年7月(5)
    • 2020年6月(224)
    • 2020年5月(392)
    • 2020年4月(267)
    • 2020年3月(76)
    • 2019年3月(1)
    • 1970年1月(29)
  • 搜索

  • 热门文章

    • 神佑之路手游源码-附视频教程
    • 最新可用老王VPN2.22.15谷歌市场版,免费使用
    • 私藏的十个网站,不看后悔系列
    • 虚拟商品自动发货商城源码
    • 不吃苦、不奋斗,你要青春做什么?
  • 随机文章

      • Java 8的新特性详解
        • element-ui是什么,以及element-ui的使用
          • 什么是vue,为什么要使用vue
            • idea如何快速创建一个java-web项目?
              • IDEA如何添加jar包
    提示信息

    SQL语句执行错误: SELECT COUNT(*) AS total FROM emlog_twitter
    Table 'itfd.emlog_twitter' doesn't exist

    «点击返回