HBuilder在网页中添加视频,尝试运用其属性、方法和事件设计各种播放效果。
时间: 2023-11-22 16:51:58 浏览: 89
HBuilder可以使用HTML5的`<video>`标签来添加视频,然后通过CSS和JavaScript来控制视频播放效果。以下是一个简单的示例:
```html
<video id="myVideo" width="640" height="360" poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
<button id="playBtn">Play</button>
<button id="pauseBtn">Pause</button>
<button id="stopBtn">Stop</button>
<script>
var myVideo = document.getElementById("myVideo");
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
var stopBtn = document.getElementById("stopBtn");
playBtn.addEventListener("click", function() {
myVideo.play();
});
pauseBtn.addEventListener("click", function() {
myVideo.pause();
});
stopBtn.addEventListener("click", function() {
myVideo.pause();
myVideo.currentTime = 0;
});
</script>
```
上面的代码创建了一个带有播放、暂停和停止按钮的视频播放器。`<video>`标签中的`<source>`元素指定了多种视频格式,以便在不同的浏览器和设备上进行兼容性处理。`poster`属性指定了视频未播放时显示的图片。
JavaScript代码通过`getElementById()`方法获取了视频和按钮的引用,并且使用`addEventListener()`方法将点击事件绑定到按钮上,以便在点击按钮时触发相应的操作。`play()`方法开始播放视频,`pause()`方法暂停视频,`currentTime`属性设置视频的当前时间,以便在点击停止按钮时将视频返回到起始位置。
通过CSS,你可以自定义视频播放器的样式,例如更改播放按钮的颜色和大小,更改进度条的颜色等。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)