最近项目需求就是浏览器里打开各种媒体或链接。做完之后算是总结一下常用的吧。有些具体参数请自己查各个标签的用法。
话不多说,上代码
<html>
<head>
<title>浏览器 + html:打开视频、播放语音、打开地图、打开链接(包括图文)</title>
//需要自己引入jQuery
</head>
<body>
<!--视频:支持格式:MP4(video/mp4)、WebM(video/webm)、Ogg(video/ogg)-->
<video id="video1" width="420" ><!--不想自己播放暂停的,加:controls-->
<source src="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4" type="video/mp4">
</video>
<button class="playVideo">播放\暂停</button>
<!--语音:支持格式:MP3(audio/mp3)、Wav(audio/webm)、Ogg(audio/ogg)-->
<audio width="420" controls>
<source src="C:\Users\MY\Desktop\临时用\cet620190602_23265839YX.mp3" type="audio/mp3">
</audio>
<!--地图-->
<div class="map">
<div><span>X坐标</span><span class="mapX">38.859802</span></div>
<div><span>Y坐标</span><span class="mapY">121.525131</span></div>
</div>
<button class="openMap">打开地图</button>
<!--链接-->
<div class="link">Bing网址<span>https://cn.bing.com</span></div>
<button class="openLink">打开链接</button>
<script>
$('.playVideo').click(function () {
//视频:
var video = document.getElementById('video1');
video.paused ? video.play() : video.pause();
});
$('.openMap').click(function () {
window.open("http://apis.map.qq.com/uri/v1/geocoder?coord=" + $('.mapX').text() + ',' + $('.mapY').text());
});
$('.openLink').click(function () {
//open,有好几个参数,常用就是:_self、_blank(默认)
//window.open($('.link span').text(), _self);
window.open($('.link span').text());
});
</script>
</body>
</html>