bootstrap/html 的video 标签

今天做了一个页面上直接播放视频的功能， 用的是video标签来实现的。（ie低版本不支持video标签）

弹出框modal代码如下

<!--  调用 -->
<a onclick="playMedia()">查看视频</a>

<!--  弹出框modal代码 -->
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
		tabindex="-1" id="mediaModal" class="modal fade">
		<div class="modal-dialog" style="margin-top:10%;">
			<div class="modal-content">
	            <div class="modal-header">
	                <button aria-hidden="true" class="close" data-dismiss="modal"
	                    type="button">X</button>
	                <h5 class="modal-title">
	                    <span id="modalTitle">查看视频</span>
	                </h5>
	            </div>
	            <div class="modal-body" style="height:500px">
		            <video controls="controls" width="100%" height="100%" autoplay="autoplay"  volume="1" id="myVideo"  loop="loop">
						<source id="media_src" src="" type="video/mp4"/>
					</video> 
	            </div>
	        </div>
		</div>
	</div>

<!--  js代码 -->
function scanMedia() {	
	$('#media_src').attr("src",'www.123.com/yourvideo.mp4');	
	document.querySelector('video').load();//video重载，以免读取src失败
	$("#mediaModal").modal('show');
}

这里通过div定义了宽度500然后100%的满屏。video标签属性如下

height、width、src：高、宽、视频路径地址
autoplay：自动播放
controls：显示控件，比如播放按钮
loop：循环播放
muted：静音
preload：预加载

source 标签是给video和audio标签提供资源的，所以音频文件的写法和视频文件的写法十分相似（几乎是只有标签名不同）。我本次只是简单实现能在线播放视频即可，音频视频标签更多的属性方法事件网上有很详细的列举， 有需要自行网上查查。