如何在HTML5中改变视频大小为1000px 600px

如何在HTML5中改变视频大小为1000px 600px,第1张

你可以在你的视频标签里面添加width="1000px" height="600px"

比如下面是我用<video>标签搞的视频,那就如下:

<video width="500px" height="500px" controls>

<source src="HD-My Heart Will Go On 2007拉斯维加斯(Live In Las Vegas 2007) 现场版--音悦Tai.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

你说的应该是向下滚动视频变小在右下角吧,

通过判定scrolltop距离来更改视频元素的属性,

width 变小然后再加个display: fixed,让小的视频窗口不随页面滚动而滚动,把视频定在右下角,

然后给视频窗口加个onclick,点击再跳到上面视频位置,通过scrolltop设置,

过程中把视频大小还原,onclick里面还得判断视频窗口大小,大的直接return,小的变大并且回到把网页回到视频的位置。

大概是这样具体 *** 作你自己摸索。

ps:scrolltop是通过js获取,鼠标滚动的时候会触发onscrool事件,直接在js中写个onscrool事件获取就行了。

<style>

video{

width: 100%

height: 100%

text-align: center

}

</style>

<body>

<video  autoplay="autoplay" loop="loop">

      <source src="../img/wow1.0CG.MP4" type="video/ogg">

      <source src="../img/wow1.0CG.MP4" type="video/mp4">

</video>

</body>

style里面是视频大小高度100%宽度100%居中显示

SRC为你导入视频的地址

video里的属性可根据你自己需要改


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7231176.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存