html5实现动态视频背景(2)-木庄网络博客

2022-03-28 23:02:01 PHP中文网 JavaScript 百度已收录

就这样我们的动态视频背景就完成了，如果想设置播放速度，我们可以添加js代码（video标签加上id=“v1”属性）：

        var video= document.getElementById('v1');
            video.playbackRate = 1.5;

那么如果我们想要添加内容到页面上怎么办呢？

		<video id="v1" autoplay loop muted>
  			<source src="./video2.mp4" type="video/mp4"  />
        </video>	
        <h1 style="color:white">123465</h1>

是的，在video标签外部添加，然后我们的效果图就是这样的（由于博客对图片大小有限制，所以截屏时间没有很长）：

是不是很简单呢？赶紧自己动手试一试吧。

相关阅读 >>

HTML5边玩边学（一）-画布详解

h5中的video标签无法播放mp4文件如何解决

HTML5 touch事件实现触屏页面上下滑动

HTML5开发手机打电话发短信功能代码实例分享

更多相关阅读请进入《HTML5》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » html5实现动态视频背景

html5实现动态视频背景

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论