Question

我有一个问题请我在悬停时播放HTML视频但是一旦我用鼠标离开我就有了隐藏视频功能，我尝试做的就是一旦我从播放视频中留下鼠标来显示占位符再次成像像视频顶部的叠加。我希望有人可以帮助我。

以下是代码https://jsfiddle.net/the_nexi/514pwkeo/2/

的实际示例

提前致谢

In [1]: Container = namedtuple('Container', ['name', 'date', 'foo', 'bar'])

In [2]: c = Container('john','10-2-2017',20.78,'python')

In [3]: %timeit dict(name=c.name,date=c.date,foo=c.foo,bar=c.bar)
The slowest run took 7.57 times longer than the fastest. This could mean that an intermediate result is being cached.
1000000 loops, best of 3: 536 ns per loop

In [4]: %timeit c._asdict()
The slowest run took 4.84 times longer than the fastest. This could mean that an intermediate result is being cached.
100000 loops, best of 3: 7.19 µs per loop

       $(document).ready(function() {       
            $('.video').each(function(i, obj) {
                $(this).on("mouseover", function() { hoverVideo(i); });
                $(this).on("mouseout", function() { hideVideo(i); });
            });
    });

    function hoverVideo(i) {  
            $('.thevideo')[i].play(); 
    }

    function hideVideo(i) {
            $('.thevideo')[i].currentTime = 0; 
            $('.thevideo')[i].pause();
    }

*{font-family: sans-serif}

Answer 1

＆＃13;

            $(document).ready(function() {       
   $('.video').each(function(i, obj) {
     $(this).on("mouseover", function() { hoverVideo(i); $(this).find(".overlayImage").hide(); });
     $(this).on("mouseout", function() { hideVideo(i); $(this).find(".overlayImage").show(); });
   });
});
function hoverVideo(i) {    			
	$('.thevideo')[i].play();             
}
function hideVideo(i) {
  $('.thevideo')[i].currentTime = 0; 
  $('.thevideo')[i].pause();
}

＆＃13;

*{font-family: sans-serif}
.video {
  position:relative;
}
.overlayImage {
  position:absolute;
}

＆＃13;

<div class="video">
  <img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
    <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

＆＃13;

我希望这个更新的代码可以帮助您

Answer 2

$(document).ready(function() {
  $('.video').each(function(i, obj) {
    $(this).on("mouseover", hoverVideo);
    $(this).on("mouseout", hideVideo);
  });
});

function hoverVideo() {
  $(this).find(".overlayImage").hide();
  $(this).find(".thevideo")[0].play();
}

function hideVideo(video) {
  $(this).find(".thevideo")[0].currentTime = 0;
  $(this).find(".thevideo")[0].pause();
  $(this).find(".overlayImage").show();
}

* {
  font-family: sans-serif
}

.video {
  position: relative;
  width: 320px;
}

.overlayImage {
  position: absolute;
}

<div class="video">
  <img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
  <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>

<div class="video">
  <img src="http://hdwarena.com/wp-content/uploads/2017/04/Beautiful-Wallpaper.jpg" class="overlayImage" width="320" />
  <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>


<div class="video">
  <img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rWaXO67Bipm9mgo7/videoblocks-4k-footage-disco-lights-as-an-abstract-colored-animated-background-or-wallpaper-light-leaks_sl5jole0z_thumbnail-small01.jpg" class="overlayImage" width="320" />
  <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>

<div class="video">
  <img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BxWKHw2nWj8nx9c2x/videoblocks-red-wallpaper-slider_rxlvi6ltb_thumbnail-small11.jpg" class="overlayImage" width="320" />
  <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

在此，每个视频都是彼此分开的，请允许我解释原因：

我更改了为事件mouseover和mouseout设置功能的方式，现在它们是事件功能。
在功能hoverVideo()和hideVideo()内，我们使用$(this)隐藏图片并播放视频，$(this).find("video")[0].currentTime = 0; $(this).find("video")[0].pause(); $(this).find("img").show();作为通讯视频div传递video并找到元素（视频和图片）与$.on()。
可选：我在css中添加了宽度：320px因为宽度较大而继续在视频外播放视频有点烦人。 < / LI>
如果你想要你可以摆脱类标签，并使用像这样的$.find()函数，例如：
```
div
```
通过这种方式，它会找到.video内img类using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Xml; using System.Xml.Linq; using System.IO; namespace SAveDirectoriesXml { class Program { const string FILENAME = @"c:\temp\test.xml"; const string FOLDER = @"c:\temp"; static XmlWriter writer = null; static void Main(string[] args) { XmlWriterSettings settings = new XmlWriterSettings(); settings.Indent = true; writer = XmlWriter.Create(FILENAME, settings); writer.WriteStartDocument(true); DirectoryInfo info = new DirectoryInfo(FOLDER); WriteTree(info); writer.WriteEndDocument(); writer.Flush(); writer.Close(); Console.WriteLine("Enter Return"); Console.ReadLine(); } static long WriteTree(DirectoryInfo info) { long size = 0; writer.WriteStartElement("Folder"); try { writer.WriteAttributeString("name", info.Name); writer.WriteAttributeString("numberSubFolders", info.GetDirectories().Count().ToString()); writer.WriteAttributeString("numberFiles", info.GetFiles().Count().ToString()); writer.WriteAttributeString("date", info.LastWriteTime.ToString()); foreach (DirectoryInfo childInfo in info.GetDirectories()) { size += WriteTree(childInfo); } } catch (Exception ex) { string errorMsg = string.Format("Exception Folder : {0}, Error : {1}", info.FullName, ex.Message); Console.WriteLine(errorMsg); writer.WriteElementString("Error", errorMsg); } FileInfo[] fileInfo = null; try { fileInfo = info.GetFiles(); } catch (Exception ex) { string errorMsg = string.Format("Exception FileInfo : {0}, Error : {1}", info.FullName, ex.Message); Console.WriteLine(errorMsg); writer.WriteElementString("Error",errorMsg); } if (fileInfo != null) { foreach (FileInfo finfo in fileInfo) { try { writer.WriteStartElement("File"); writer.WriteAttributeString("name", finfo.Name); writer.WriteAttributeString("size", finfo.Length.ToString()); writer.WriteAttributeString("date", info.LastWriteTime.ToString()); writer.WriteEndElement(); size += finfo.Length; } catch (Exception ex) { string errorMsg = string.Format("Exception File : {0}, Error : {1}", finfo.FullName, ex.Message); Console.WriteLine(errorMsg); writer.WriteElementString("Error", errorMsg); } } } writer.WriteElementString("size", size.ToString()); writer.WriteEndElement(); return size; } } }内的每个public function insert($data) { $db = $this->db; $db->insert('', $data); $id = $db->insert_id(); if ($id > 0) { return $id; } else { return false; } }元素，其余部分来自{{1}}。

我希望这段代码可以帮助你。

在悬停HTML视频上使用自动播放暂停覆盖或占位符

2 个答案: