视频全屏播放
2018-09-15 本文已影响7人
siberiawolf0307
微信中视频全屏播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信视频播放全屏</title>
</head>
<body>
<div id="video" class="video " style="width: 100%; height: 100%;">
<video id="my_video"
poster="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/h%3D452/sign=74df54dd8735e5dd8f2ca4da44c7a7f5/c8177f3e6709c93d4bd2ba789d3df8dcd1005418.jpg"
style="object-fit: fill; width: 100%; height: 100%;"
type="video/mp4"
preload="load"
playsinline="true"
webkit-playsinline="true"
x-webkit-airplay="allow"
airplay="allow"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portrait"
src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"
controls="controls"></video>
</div>
</body>
</html>
使用插件方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频播放</title>
<link rel="stylesheet" href="zy.media.min.css">
<script src="zy.media.min.js"></script>
</head>
<body>
<div class="playvideo">
<div class="zy_media">
<video poster="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/h%3D452/sign=74df54dd8735e5dd8f2ca4da44c7a7f5/c8177f3e6709c93d4bd2ba789d3df8dcd1005418.jpg" data-config='{"mediaTitle": "我的小视频"}'>
<source src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>
</div>
</div>
<script>
zymedia('video',{autoplay: false});
</script>
</body>
</html>
