H5视频、音频详解

最新推荐文章于 2021-06-05 02:03:01 发布

林中明月间。

最新推荐文章于 2021-06-05 02:03:01 发布

阅读量901

点赞数

分类专栏： Html+Css+Js 文章标签： H5音频视频

本文链接：https://blog.csdn.net/a772116804/article/details/83000809

版权

Html+Css+Js 专栏收录该内容

55 篇文章 3 订阅

订阅专栏

iframe嵌套视频，视频全屏用不了

<body>
<!-- 视频:video source 音频:audio 
	媒体元素：
	1.controls:显示或隐藏用户控制界面
	2.autoplay:媒体是否自动播放
	3.loop:是否循环播放
	4.currentTime:开始到播放现在所用的时间
	5.duration:持续总时间(只读 true false)
	6.volume:0.0-1.0的音量相对值
	7.muted:是否静音(只读 true false)
	8.autobuffer:开始的时候是否缓存加载，autoplay忽略此属性
	9.paused:媒体是否暂停(只读 true false)
	10.ended:媒体是否播放完毕(只读 true false)
	11.error:媒体发生错误，返回错误代码(只读 true false)
	12.currentSrc:以字符串的形式返回媒体地址(只读 true false)
	视频格式包括：.avi.flv.mp4.mkv.ogv

	三个js方法
	1.play() 媒体播放
	2.pause() 媒体暂停
	3.load() 重新加载媒体

	Video 额外特性(js)
	poster:视频播放前的预览图片
	width、height：设置视频尺寸(写行间) 
	例：<video controls="controls" width="500" height="500">
	videoWidth、videoHeight:视频的实际尺寸(只读) 
-->
    <audio src=".mp3" controls="controls" autoplay="autoplay" loop="loop" type="video/mp3"></audio>

	<audio src=".mp3" controls autoplay loop type="video/mp3"></audio><!--简写-->

	<video src=".mp4" controls autoplay type="video/mp4"></video>

	<video width="500" height="250" controls="controls">
		<source src="movie.ogg" type="video/ogg">
		<source src="movie.mp4" type="video/mp4">
		您的浏览器不支持此种视频格式。
		<!-- 在ios和android都可以播放 --> 
		<!-- 自动识别浏览器支持格式 -->
	</video>  

<!--  -->
<!--另外两种播放代码 1、多-->
<iframe src="http://static.video.qq.com/TPout.swf?vid=n03287p1xbx&amp;auto=0" 

width="640" height="498" frameborder="0" allowfullscreen=""></iframe>

<embed id="mv" width="100" height="100" controls="controls" loop="" 

src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?

max_age=86400&amp;v=20161117&amp;vid=a0786tkmfk1&amp;auto=0" type="video/mp4">

<!--  -->

	<audio id="al" src=".mp3" controls autoplay type="video/mp3"></audio>
	<script type="text/javascript">
		var oA = document.getElementById('al');
		/*setInterval(function(){
			console.log(oA.currentTime);
		},1000)*/ 
		oA.currentTime = 60;// 设置时间 从60s开始
		console.log(oA.duration);//返回 true false
		console.log(oA.volume);//1
		console.log(oA.muted);//返回 true false
        oV.volume = 1;
        if(oV.muted/paused){}
	</script>

	<!-- 
	三个js方法
	1.play() 媒体播放
	2.pause() 媒体暂停
	3.load() 媒体加载
	 -->
	 <video id="mv"  controls="controls" width="500" height="500">
		<!-- <source src="movie.ogg" type="video/ogg"> -->
		<source src="Intermission-Walk-in_512kb.mp4" type="video/mp4">
		您的浏览器不支持此种视频格式。
		<!-- 在ios和android都可以播放 --> 
		<!-- 自动识别浏览器支持格式 -->
	</video>  
	<script type="text/javascript">
		var oV = document.getElementById('mv');
		var oS = document.getElementsByTagName('source');

		//设置视频播放前的预览图片
		oV.poster = "2.png";
        <video poster="/images/aa.gif">

		//视频默认多大就是多大、设置视频的大小
		oV.width = 500;
		oV.height = 500;

		//获取视频的实际尺寸
		console.log(oV.videoWidth);
		console.log(oV.videoHeight);
		//鼠标移入视频播放
		oV.onmouseover = function(){
			this.play();
		} 

		//鼠标移出视频暂停
		oV.onmouseout = function(){
			this.pause();
		} 

		// load()方法
		btn.onclick = function(){
		    oS[0].src = 'xxx.mp4'
		    oV.load();
		}

	</script>
</body>