假设有一个play video的button
希望点击了之后,在当前浏览器的窗口出现一个全尺寸的video窗口(覆盖后面的内容),然后点击播放即可。
需要自适应窗口的宽度
关闭窗口后video自动停止播放
目前是在bootstrap modal中内嵌一个video,但是有两个问题,第一就是不能自适应,第二关闭modal后video仍然播放。
感觉使用外嵌播放器都无法自适应,定制比较麻烦,故求解决方案。
<div class="modal fade video-demo-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Video Demo</h4>
</div>
<div class="modal-body text-center">
<iframe src="https://player.vimeo.com/video/151375185?byline=0" width="800" height="450" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
使用video标签啦,js写事件
接口:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
简单实例:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video