html5多媒体标签之video标签

一,video标签的基本属性

这里写图片描述

<!--
    什么是video标签
    1,格式:
    <video  src="">
    </video>

    基本属性:
    src:用于播放视频地址,包括url和本地视频
    autoplay:自动播放视频
    controls:视频播放控制条(时间显示,进度条,声音等)
    poster:视频站位图片
    loop:循环播放,一般用于小广告播放,一遍一遍的播放(一般只和自动播放属性一起用)
    preload:预加载视频
    muted:静音模式
    width:视频播放器的宽度,只设置宽度可以实现等比缩放
    height:视频播放器的高度,只设置高度度可以实现等比缩放
-->

<video src="http://jumpjoy3d.9-lin.com/mp4/21003.mp4"
       preload="auto"
       controls="controls"
       poster="btn.png"
       width="500">
</video>
<!--<video src="http://jumpjoy3d.9-lin.com/mp4/21003.mp4"-->
       <!--autoplay="autoplay"-->
       <!--loop="loop">-->
<!--</video>-->
二,video标签的第二种格式
<!--
    第二种格式:
    <video>
        <source src="" type="">
    </video>

    由于视频数据非常重要的,所以五大浏览器都不愿意使用别人的视频格式。那么w3c为了解决了这个问题,就推出了这种格式。
    注意点:
    1,其他的属性和第一种格式是一样的
    2,虽然通过第二种video格式可以解决大部分浏览器播放不同视频的问题,但是还不能解决过去浏览器播放视频问题,那么以后可以通过js的一个框架叫做html5media来实现
-->
<video>
    <source src="http://jumpjoy3d.9-lin.com/mp4/21003.mp4" type="video/mp4">
    <source src="http://jumpjoy3d.9-lin.com/mp4/21003.ogg" type="video/ogg">
    <source src="http://jumpjoy3d.9-lin.com/mp4/21003.webm" type="video/webm">
</video>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用video标签时,可以自动缩放图像以适应必要的大小。该标签会自动检测图像的方向(横向/纵向/正方形)。在显示项目的信息面板时,可以在多媒体视图中使用头像,并自动排列多个头像。此外,可以在Actors表单列表中使用较小的方形图像。 如果需要获取视频的总时长(duration)并将其赋值给进度条的最大值,可以使用以下代码:progress.max = video.duration。另外,如果想要实时更新进度条的数值,可以使用定时器setInterval(),每1毫秒获取一次视频的数值,并将它赋值给进度条。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Videonizer Platinum7.0(多功能视频管理工具)是一款非常专业的视频管理工具.rar](https://download.csdn.net/download/china365love/72085831)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [html5中的video标签和audio标签详解](https://blog.csdn.net/weixin_30383561/article/details/118395423)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值