H5的video元素实现的Demo

来源：互联网发布：网络上icbc是什么意思编辑：程序博客网时间：2024/05/17 07:23

利用前一段时间听说是一个国乒选手之间的较量，路过就将其录制了下来。学到H5的Video元素是就将其作为素材写了一个Demo

属性以及说明：

属性

值

说明

src

url

要播放视频的URL

autoplay

视频就绪后立刻播放

controls

添加播放、暂停和音量等控件

width

像素

设置视频播放器的宽度

height

像素

设置视频播放器的高度

loop

设置视频是否循环播放

preload

auto/none/metadata

视频在页面加载时开始加载，并预备播放

startTime

读取媒体的开始播放时间，通常为0

currentTime

读取或修改媒体的当前播放位置

duration

读取媒体总的播放时间

volume

0~1

读取或修改媒体的播放音量

muted

true/false

读取或修改媒体的静音状态

常用的方法和事件：

方法/事件

功能

play()

播放媒体，paused属性的值自动修改为false

pause()

暂停播放，paused属性的值自动修改为true

load()

重新载入媒体进行播放

play事件

执行play()方法时触发

pause事件

执行pause()方法时触发

error事件

获取媒体数据错误时触发

timeupdate事件

当前播放位置发生改变时触发

durationchange事件

播放时长被改变

<html><head><meta charset="UTF-8"><title></title></head><body><div style="text-align:center"><button onclick="playPause()">播放/暂停</button><button onclick="makeBig()">放大</button><button onclick="makeSmall()">缩小</button><button onclick="makeNormal()">普通</button><br><video id="video1" width="1200"><source src="Video/pingpang.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video></div><script>var myVideo = document.getElementById("video1");function playPause() {if(myVideo.paused)myVideo.play();elsemyVideo.pause();}function makeBig() {myVideo.width = 1800;}function makeSmall() {myVideo.width = 600;}function makeNormal() {myVideo.width = 1200;}</script></body></html>

运行结果展示：

阅读全文

0 0