内容的栏目 * @param int $category 0列表 1频道 2单页 3外链 * @return array */ function category_list($forumlist, $model = 0, $display = 0, $category = 0) { if (empty($forumlist)) return NULL; static $cache = array(); $key = $model . '-' . $display . '-' . $category; if (isset($cache[$key])) return $cache[$key]; if ($display) { foreach ($forumlist as $k => $val) { if (1 == $val['display'] && 1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } else { foreach ($forumlist as $k => $val) { if (1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } return empty($cache[$key]) ? NULL : $cache[$key]; } /** * @param $forumlist 所有版块列表 不分模型 * @param int $display 0全部CMS栏目 1在首页和频道显示内容的栏目 * @param int $category 0列表 1频道 2单页 3外链 * @return array */ function category_list_show($forumlist, $display = 0, $category = 0) { if (empty($forumlist)) return NULL; static $cache = array(); $key = $display . '-' . $category; if (isset($cache[$key])) return $cache[$key]; if ($display) { foreach ($forumlist as $k => $val) { if (1 == $val['display'] && 1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } else { foreach ($forumlist as $k => $val) { if (1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } return empty($cache[$key]) ? NULL : $cache[$key]; } /** * @param $forumlist 所有版块列表 * @return mixed BBS栏目数据(仅列表) 尚未开放bbs频道功能 */ function forum_list($forumlist) { if (empty($forumlist)) return array(); static $cache = array(); if (isset($cache['bbs_forum_list'])) return $cache['bbs_forum_list']; $cache['bbs_forum_list'] = array(); foreach ($forumlist as $_fid => $_forum) { if ($_forum['type']) continue; $cache['bbs_forum_list'][$_fid] = $_forum; } return $cache['bbs_forum_list']; } // 导航显示的版块 function nav_list($forumlist) { if (empty($forumlist)) return NULL; static $cache = array(); if (isset($cache['nav_list'])) return $cache['nav_list']; foreach ($forumlist as $fid => $forum) { if (0 == $forum['nav_display']) { unset($forumlist[$fid]); } } return $cache['nav_list'] = $forumlist; } ?>How can I show only a section of a video frame with CSS or JavaScript? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>How can I show only a section of a video frame with CSS or JavaScript? - Stack Overflow

    How can I show only a section of a video frame with CSS or JavaScript? - Stack Overflow

    programmeradmin0浏览0评论

    I want to show only part of the video frame for a given video. Let me explain what I mean with examples:

    1. I have a wide screen video (852 x 480) but I want to display it as a full screen video (640 x 480) by using CSS or JavaScript to imitate cropping it. The video file doesn't change; the script just hides the pixels at the sides.
    2. I have a non-standard sized video that is a custom mix of two 640 x 480 video side-by-side, so it is 1280 x 480 in total size. Without having to edit the video, I would like to imitate having two videos play simultaneously on a page, but it will be from this single source video. I would like to make two video elements 640 x 480 and one focuses on the part to the left and the other focuses to the part on the right on the 1280 original video source.

    I imagine setting properties like top and left to designate the start point for the video, then setting properties like bottom and right or height and width to designate how wide and high the video will will be shown from the start point.

    I would very much prefer a CSS only solution. I doubt one exists however. I am okay with javascript/jquery. I have an idea based on the solution in this answer, but that seems a bit on the hack side of things. Basically, I could make a div the size that I want the video, relatively position it and set overflow to hidden. Then I would put the video element inside the div and absolutely position that so that the parts I want displayed are seen in the div, but the other parts overflow and are hidden. That does have the benefit of not needing javascript, but I would prefer to use real properties if they exists and no added HTML.

    Here's some images to show what I want to acplish, but do not know of any non-hack solution. The white part would be the size of the video frame and what is shown to the user. The gray part is what is hidden.

    Video frame is 640 x 480 starting at the top left corner. The source is 852 x 480. Video frame is 640 x 480 starting at the top right corner. The source is 852 x 480. Video frame is 640 x 480 starting at top and 106 pixels from the left. The source is 852 x 480. Video frame is 320 x 240 starting at 140 pixels from the top and 212 pixels from the left. The source is 852 x 480.

    I want to show only part of the video frame for a given video. Let me explain what I mean with examples:

    1. I have a wide screen video (852 x 480) but I want to display it as a full screen video (640 x 480) by using CSS or JavaScript to imitate cropping it. The video file doesn't change; the script just hides the pixels at the sides.
    2. I have a non-standard sized video that is a custom mix of two 640 x 480 video side-by-side, so it is 1280 x 480 in total size. Without having to edit the video, I would like to imitate having two videos play simultaneously on a page, but it will be from this single source video. I would like to make two video elements 640 x 480 and one focuses on the part to the left and the other focuses to the part on the right on the 1280 original video source.

    I imagine setting properties like top and left to designate the start point for the video, then setting properties like bottom and right or height and width to designate how wide and high the video will will be shown from the start point.

    I would very much prefer a CSS only solution. I doubt one exists however. I am okay with javascript/jquery. I have an idea based on the solution in this answer, but that seems a bit on the hack side of things. Basically, I could make a div the size that I want the video, relatively position it and set overflow to hidden. Then I would put the video element inside the div and absolutely position that so that the parts I want displayed are seen in the div, but the other parts overflow and are hidden. That does have the benefit of not needing javascript, but I would prefer to use real properties if they exists and no added HTML.

    Here's some images to show what I want to acplish, but do not know of any non-hack solution. The white part would be the size of the video frame and what is shown to the user. The gray part is what is hidden.

    Video frame is 640 x 480 starting at the top left corner. The source is 852 x 480. Video frame is 640 x 480 starting at the top right corner. The source is 852 x 480. Video frame is 640 x 480 starting at top and 106 pixels from the left. The source is 852 x 480. Video frame is 320 x 240 starting at 140 pixels from the top and 212 pixels from the left. The source is 852 x 480.

    • javascript
    • css
    • html5-video
    Share Improve this question edited May 23, 2017 at 12:01 CommunityBot 11 silver badge asked Dec 1, 2014 at 20:14 user1934286user1934286 1,7625 gold badges23 silver badges43 bronze badges 1
    • Just create a mask using 4 elements (top, left, bottom, right) + CSS. – Matt Ball Commented Dec 1, 2014 at 20:17
    Add a ment  | 

    2 Answers 2

    Reset to default 3

    You can use CSS's clip-path property to display the section of the video.

    You'll need to define inline svg clipPath element, add a path element with co-ordinates, give the clipPaths the ids and use them in your CSS to clip the video(clip-path: url(#id)).

    Fiddle

    HTML:

    <iframe id="clip-1" width="852" height="480" src="//www.youtube./embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-2" width="852" height="480" src="//www.youtube./embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-3" width="852" height="480" src="//www.youtube./embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-4" width="852" height="480" src="//www.youtube./embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>

<svg>
    <defs>
        <!-- Co-ordinates for the first image in your question -->
        <clipPath id="one">
            <path d="M0,0 L640,0 L640,480 L0,480z" />
        </clipPath>
        <!-- Co-ordinates for the second image in your question -->
        <clipPath id="two">
            <path d="M212,0 L852,0 L852,480 L212,480z" />
        </clipPath>
        <!-- Co-ordinates for the third image in your question -->
        <clipPath id="three">
            <path d="M106,0 746,0 746,480 106,480z" />
        </clipPath>
        <!-- Co-ordinates for the fourth image in your question -->
        <clipPath id="four">
            <path d="M212,140 532,140 532,380 212,380z" />
        </clipPath>
    </defs>
</svg>

    CSS:

    #clip-1 {
    position: absolute;
    -webkit-clip-path: url(#one);
    clip-path: url(#one);
}
#clip-2 {
    position: absolute;
    top: 480px;
    -webkit-clip-path: url(#two);
    clip-path: url(#two);
}
#clip-3 {
    position: absolute;
    top: 960px;
    -webkit-clip-path: url(#three);
    clip-path: url(#three);
}
#clip-4 {
    position: absolute;
    top: 1440px;
    -webkit-clip-path: url(#four);
    clip-path: url(#four);
}
body {
    margin: 0 auto;
}

    I decided to go with the "hack" solution that I mentioned in the question. I was able to design it exactly as described, but if your selected portion of the video does not include the controls then you will have to make custom controls and design them to fit in the the selected portion. I did this with video.js.

    <!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>

  <link href="http://vjs.zencdn/4.10/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn/4.10/video.js"></script>
  
<style type="text/css">
.clipvid {  
	position: relative;
	width: 640px;
	height: 480px;
	overflow: hidden;
}
.clippedvid {
	position: absolute;
	top: 0;
	left: -106px;
}
/* This is from the css for video.js. I had to make these changes.*/ 
.vjs-default-skin .vjs-control-bar {
  width: 75%;
  left: 12.5%;
}
  
  
</style>
  
</head>

<body>
<div class="clipvid">
    <video class="clippedvid video-js vjs-default-skin" width="852px" height="480px" controls autoplay data-setup="{}">
        <source src="http://www.w3schools./html/mov_bbb.mp4" type="video/mp4">
    </video>
</div>


<video class="video-js vjs-default-skin" width="852px" height="480px" controls data-setup="{}">
    <source src="http://www.w3schools./html/mov_bbb.mp4" type="video/mp4">
</video>

</body>
</html>

    It works well enough, but it seems that at least FF and Chrome will download the video once for each element, even though they call the exact same source file? This means in a setup where one page uses the same source video in two video separate elements, that source video will be downloaded twice. Clearly two temp files would be a waste of bandwidth. This might be cause to scrap this solution and e up with something else.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论