有关移动端全频播放视频的问题。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3139 天前的主题，其中的信息可能已经有所发展或是发生改变。

移动端的 html 页面中如何实现点击图片后全频播放视频？
视频是已经上传到腾讯视频的文件。
就是想加在下面的代码中：

<img src="image/2.jpg">

请问该怎么办？

视频

端全频

img

全频

4 条回复 • 2016-04-13 08:41:13 +08:00

tadtung

2016-04-13 08:37:41 +08:00

方法比较多。。。可以点击图片内置播放器全屏播放

也可以使用 layer 弹出层等、

ztianyuan

2016-04-13 08:39:38 +08:00

@tadtung 比较青睐弹出层，请问该如何实现。视频在腾讯视频，

ztianyuan

2016-04-13 08:40:10 +08:00

@tadtung 如果能实现点击后全屏播放视频，自动横向。。。。。

ztianyuan

2016-04-13 08:41:13 +08:00

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小镇天使</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/imgclient-page1b41c1.css">

<link media="screen and (min-width:1000px)" rel="stylesheet" type="text/css" href="css/imgpc-page1b2f8d.css">
<style>
body{ -webkit-touch-callout: none; -webkit-text-size-adjust: none; }
</style>
<style>
#nickname{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:90%;}
ol,ul{list-style-position:inside;}
#activity-detail .page-content .text{font-size:16px;}
</head>
</style>

<body id="activity-detail">
<div class="page-content" style="font-size:0">
<img src="image/1.jpg">
<a href="http://v.qq.com/boke/page/q/6/a/q0193tin76a.html" >
<img border="0" src="image/2.jpg">
</a>
<img src="image/3.jpg">
<section id="shifu_sig_003" donone="shifuMouseDownSignature('shifu_sig_003')" label="Copyright © 2015 chuangji All Rights Reserved." style="
border-style: none;
clear: both;
width: 280px;
min-height: 150px;
text-align: center;
margin: 15px auto;">
<img src="image/logo.png" style="
display: block;
margin: 10px auto;
width:82px;" title="image/logo.png" alt="二维码"/>
<section style="
background-repeat: repeat-x;
display: inline-block;
font-size: 14px;
border-top: dashed 2px #848484;
padding: 10px;">
<p>
粗粮小镇｜有范儿东北菜
</p>
</section>
<section style="font-size: 14px;">
微信 ID ： clxz0452
<section style="
width: 180px;
border: dashed 2px #848484;
padding: 10px;
margin: 10px auto;">
<img src="image/qr.jpg" style="
margin-top: 5px;
width: 180px;" title="image/qr.jpg" alt="cl.jpg"/>
</section>长按二维码关注
</section>
</section>
<p class="shifubrush">
<br/>
</p>

</div>
</body></html>