• 客服QQ:1193846053   微信:suyoufuwu   联系电话:13080553467     

网站建设公司做网站调用视频video标签用法

速优网络(10年经验),服务数万家企业,固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司,专业团队,值得选择!建站业务:企业网站建设、公司官网制作、外贸网站建设、网站仿制、网站复制、仿站、外贸建站、单页扒站 客服微信【suyoufuwu】


一段简单的 HTML5 视频:

    <video src="video.mp4" controls="controls">
    您的浏览器不支持 video 标签。
    </video>

属性
性                值               描述
autoplay    autoplay    如果出现该属性,则视频在就绪后马上播放。
controls    controls    如果出现该属性,则向用户显示控件,比如播放按钮。
height    pixels    设置视频播放器的高度。
loop    loop    如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted    muted    规定视频的音频输出应该被静音。
poster    URL    规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload    preload    

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。
src    url    要播放的视频的 URL。
width    pixels    设置视频播放器的宽度。

引用

    <video
      id="video"
      src="video.mp4" /*视频地址*/
      controls = "true" /*是否显示播放控件*/
      poster="images.jpg" /*视频封面*/
      preload="auto" /*预加载*/
      webkit-playsinline="true" /*IOS中让视频在小窗内播放而不是全屏播放*/  
      playsinline="true" /*IOS微信浏览器支持小窗内播放*/
      x-webkit-airplay="allow" /*是否支持ios的AirPlay功能*/
      x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
      x5-video-player-fullscreen="true" /*设置为true防止横屏*/
      x5-video-orientation="portraint" /*播放器的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
      style="object-fit:fill">
    </video>

说明

src:视频的地址

controls:允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。

poster:视频封面,果未设置该属性,则使用视频的第一帧来代替。

preload:在页面加载后载入视频。

webkit-playsinline和playsinline:视频播放时局域播放,不脱离文档流

x-webkit-airplay="allow": 是否支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐和图片文件

x5-video-player-type:启用同层H5播放器(沉浸式播放)WeChat安卓版特有的属性。播放时全屏,但是除去了control和微信的导航栏,只留下"X"和"<"两键。

x5-video-orientation:声明播放器支持的方向,可选值landscape横屏, portraint竖屏。默认值portraint。这个属性需要x5-video-player-type开启H5模式

x5­-video­-player­-fullscreen:全屏设置。属性值:ture和false

附加:object-fit 、object-position

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

object-position 属性一般与 object-fit一起使用,用来设置元素的位置。

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

值    描述
fill    默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
contain    保持原有尺寸比例。内容被缩放。
cover    保持原有尺寸比例。但部分内容可能被剪切。
none    保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down    保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
initial    设置为默认值
inherit    从该元素的父元素继承属性。

object-position: position|initial|inherit;

值    描述
position    指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值,第二个值为 y 坐标位置的值。表示的方式有:

    object-position: 50% 50%;
    object-position: right top;
    object-position: left bottom;
    object-position: 250px 125px;

initial    设置为默认值
inherit    从该元素的父元素继承属性。

以上就是速优网络和大家分享的"网站建设公司做网站调用视频video标签用法",非常感谢您有耐心的读完这篇文章,我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供:企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务,本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作,请扫码咨询,我们将诚挚为您服务。

TAG标签:

全国分站

全国分站