• 售前

  • 售后

热门帖子
入门百科

HTML5利用DOM举行自定义控制示例代码

[复制链接]
ssffgsa 显示全部楼层 发表于 2021-10-25 20:17:37 |阅读模式 打印 上一主题 下一主题
HTML5的video固然可用controls来展示控件,并进行控制播放暂停等,但是差别的浏览器体现的效果可能不一样,以是很多时候我们需要利用Dom来进行自界说的一些操作和控制。下面是一个小例子。
当然效果不是很美观,若想悦目标可以本身设置css样式等。

复制代码代码如下:
<div id="video_div" style="text-align:center;">
<button >播放/暂停</button>
<button >大</button>
<button >中</button>
<button >小</button>

<video id="myVideo" width="500" height="250" style="margin-top:15px;">
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogg" type="video/ogg" />
您的浏览器不支持此HTML5 视频标签。
</video>
</div>


复制代码代码如下:
<script type="text/javascript">
var myVideo=document.getElementById("myVideo");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function toBig()
{
myVideo.width=560;
}
function toNormal()
{
myVideo.width=420;
}
function toSmall()
{
myVideo.width=320;
}
</script>

需要注意的是在全部属性中,只有 videoWidth 和 videoHeight 属性是立刻可用的。
在视频的元数据已加载后,其他属性才可用。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作