年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2401|回复: 0

Html5中Video标签的基本使用

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2016-2-15 22:30:02 | 显示全部楼层 |阅读模式
    1.pic.jpg
    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html>
    <head>
    	<title>HTML5视频标签</title>
    	<script>
    		// 获取标签
    		var video1 = null;
    		window.onload = function(){
    			video1 = document.getElementById("video1");
    		}
    		// 如果暂停则播放,否则暂停
    		function playPause(){
    			if(video1.paused){
    				video1.play();
    			}else{
    				video1.pause();
    			}
    		}
    		// 修改宽度
    		function makeBig(){
    			video1.style.width="400px";
    		}
    		function makeNormal(){
    			video1.style.width="200px";
    		}
    		function makeSmall(){
    			video1.style.width="100px";
    		}
    	</script>
    	
    </head>
    
    <body>
    	<!-- controls:显示控制进度条 autoplay:自动播放 loop:循环播放 muted:静音播放 poster:预览图-->
    	<video id="video1" width="300" height="200" controls muted poster="http://www.yusian.com/download/sian.png">
    		<source src="http://w3cschool.cn/movie.ogg" type="video/ogg">
    		您的浏览器不支持HTML5视频播放
    	</video>
    	
    	<div style="margin-top: 10px;width: 200px;text-align: center">
    		<button>播放/暂停</button>
    		<button>大</button>
    		<button>中</button>
    		<button>小</button>
    	</div>
    </body>
    	
    </html>

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-19 17:35 , Processed in 0.048834 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表