浏览器 + html：打开视频、播放语音、打开地图、打开链接（包括图文）

最新推荐文章于 2021-10-25 19:49:07 发布

菜牙9527

最新推荐文章于 2021-10-25 19:49:07 发布

阅读量509

点赞数

分类专栏：前端小方法文章标签： html js

本文链接：https://blog.csdn.net/weixin_43932432/article/details/108121875

版权

前端小方法专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近项目需求就是浏览器里打开各种媒体或链接。做完之后算是总结一下常用的吧。有些具体参数请自己查各个标签的用法。
话不多说，上代码

<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>

菜牙9527

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器 + html：打开视频、播放语音、打开地图、打开链接（包括图文）

最近项目需求就是浏览器里打开各种媒体或链接。做完之后算是总结一下常用的吧。有些具体参数请自己查各个标签的用法。话不多说，上代码<html><head><title>浏览器 + html：打开视频、播放语音、打开地图、打开链接（包括图文）</title>//需要自己引入jQuery</head><body> <!--视频：支持格式:MP4（video/mp4）、WebM（video/webm）、Ogg（vide
复制链接

扫一扫