<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>视频适配移动端</title>

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="telephone=no" name="format-detection">

    <meta content="email=no" name="format-detection">

    <style type="text/css">

    body{ max-width:

    640px; margin:0 auto; }

    </style>

</head>

<body>

<div style="padding:56% 0 0;position: relative;margin:0;background-color: #000;">

    <video style="position: absolute;height: 100%;width: 100%;top:0;left:0;" src="http://img.fuyuandian.com/kaiguang2.mp4" controls="controls"></video>

</div>

</body>

</html>

移动端适配video适配的更多相关文章

  1. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  2. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  3. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  4. 移动端iPhone系列适配问题的一些坑

    完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过 ...

  5. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  6. 老项目的#iPhone6与iPhone6Plus适配#LaunchImage适配

    本文永久地址为 http://www.cnblogs.com/ChenYilong/p/4020384.html,转载请注明出处.  Evernote印象笔记链接:https://www.everno ...

  7. 老项目的#iPhone6与iPhone6Plus适配#Icon适配

        本文永久地址为http://www.cnblogs.com/ChenYilong/p/4020373.html ,转载请注明出处.  这是Evernote印象笔记的链接:https://www ...

  8. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  9. 再谈移动端Web屏幕适配

    一个多月前水了一篇移动web屏幕适配方案,当时噼里啪啦的写了一通,自我感觉甚是良好.不过最近又有一些新的想法,和之前的有一些不同. 先说一下淘宝的方案,感觉现在好多的适配方案都是受了它的影响,上周六看 ...

随机推荐

  1. 引用WebService出现错误

    在引用WebService作为服务引用的时候,由于VS生成时生成了两个入口点,导致出现 引发的异常:“System.Windows.Markup.XamlParseException”(位于 Pres ...

  2. 什么是jsonp？——使用jsonp解决跨域请求问题

    我们在使用ajax请求的时候经常会产生跨域问题,这是由于浏览器的同源策略导致的.所谓同源,即域名.协议.端口均相同,否则不管是静态页面还是动态网页或者web服务都无法通过ajax正常请求.有时候,我们 ...

  3. BurpSuite系列(十一)----Project options模块(项目选择)

    一.简介 Project options主要用来对Project的一些设置. 二.模块说明 Project options主要由五个模块组成: 1.Connections 连接2.HTTP3.SSL4 ...

  4. HTML_基础篇v2

    网站图片页面显示案例 1.需求分析 需要在浏览器中显示2张图片信息,效果如下: 2.技术分析 ［图片标签］<img /> 属性: src:指图片的位置(路径) 路径的写法:绝对路径和相对路 ...

  5. pyspider用PyQuery解析页面数据

    示例说明: 本示例主要是PyQuery解析返回的response页面数据.response.doc解析页面数据是pyspider的主要用法,应该熟练掌握基本使用方法.其他返回类型示例见后续文章. py ...

  6. SpringAOP03 项目脚手架、自定义注解、织入切面、引介增强

    1 项目脚手架 利用 Maven 进行创建 1.1 利用IDEA创建一个Maven原型项目 技巧01:原型Maven项目是没有webapp文件夹和resources项目文件夹的,需要自己手动创建:创建 ...

  7. 557. Reverse Words in a String III 翻转句子中的每一个单词

    ［抄题］: Given a string, you need to reverse the order of characters in each word within a sentence whi ...

  8. Python学习笔记_Python向Excel写入数据

    实验环境 1.OS:Win 10 64位 2.Python 3.7 3.如果没有安装xlwt库,则安装:pip install xlwt 下面是从网上找到的一段代码,网上这段代码,看首行注释行,是在L ...

  9. xamarin.droid自己的示例工程有些都装不上模拟器，是因为它的architectures选项没设对

    也许是版本更迭导致的,有些老工程的architectures不对,如果x86不勾的话,是不能在genymotion的模拟器上跑的.

  10. Python pip命令

    一.简介 pip 是一个安装和管理 Python 包的工具 , 是 easy_install 的一个替换品.distribute是setuptools的取代(Setuptools包后期不再维护了),p ...