在图像上播放视频点击 iphone答案

【问题标题】：Play video on image click on iphone在图像上播放视频点击 iphone
【发布时间】：2014-04-18 09:19:47
【问题描述】：

我正在尝试在图像点击事件上播放视频。我感兴趣的设备是iphone。我希望 iphone 用户在访问我的网站时单击图像并在设备本机播放器上播放视频。我也尝试过带有海报的视频标签，但是当视频结束并且用户回到我的网站时，海报不再显示。我用安卓设备测试过，没有问题。这就是为什么我决定让它与 onclick 图像事件而不是视频标签一起工作。

如果有人可以帮助我，任何帮助将不胜感激，因为我正在寻找解决方法数周。

<!DOCTYPE html>

<div id="home01">
<img id="myImg" src="picture.jpg" width="640" height="360">
</div>


 <script language="javascript" type="text/javascript">

 document.getElementById('myImg').addEventListener('click', function (e) {

    var video = document.createElement('video');
    var sourceTag = document.createElement('source'); 

    sourceTag.type = 'video/mp4';
    sourceTag.src = 'rolex.mp4';

    video.appendChild(sourceTag);

    video.play();
});

 </script>

</html>

【问题讨论】：

标签： image video click

【解决方案1】：

这是一种方法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My iPhone player</title>
<style>
video {display:none;}
</style>
</head>

<body>
<div id="home01">
<img id="myImg" src="picture.jpg" width="640" height="360">
<video id="myPlayer" src="rolex.mp4" controls width="640" height="360"></video>
</div>

<script type="text/javascript">
document.getElementById('myPlayer').addEventListener('webkitendfullscreen', function () {
    document.getElementById('myPlayer').style.display = 'none';
},false);
document.getElementById('myImg').addEventListener('touchstart', function () {
    document.getElementById('myPlayer').style.display = 'block';
    document.getElementById('myPlayer').play();
},false);
</script>
</body>
</html>

您的代码不起作用的原因之一是视频元素是在点击事件之后创建的（根据我的示例，在 iPhone/触摸设备上应该是 touchstart）并且 Apple 不允许.您的视频元素需要在触摸事件之前位于 DOM 中。

我建议您阅读此问题以了解更多信息information。

您可以优化代码以获得更好的布局。

【讨论】：

感谢 Florestan06 的帮助。由于我现在没有 iphone 来测试代码，所以我的主要问题是。当视频结束并且用户返回网页时，视频元素是否可见，因为我希望保持隐藏状态，以便用户除了图像之外看不到任何其他内容。谢谢
您需要在实际设备上进行测试，看看它是否完全符合您的需求。我相信它应该。
上面的代码你试过了吗？它是否按预期工作？
感谢您的关注，我测试了代码，但是当视频结束并且用户返回我的网站时，视频仍然是黑色的。但是，此时我正在使用没有 javascript 的简单视频标签测试 iphone，我认为我将能够使其按我的意愿工作。谢谢。
您似乎没有实现上述建议代码的工具。在 Stackoverflow 社区寻求支持时，您应该更加彻底，因为这里的大多数人都是专业程序员。

【解决方案2】：

以下是我实现这一目标的方法，到目前为止，它在移动设备和桌面设备上的体验都很好（在 iPhone 上测试）：

主文档中的 HTML（注意 PATH_TO 在 Flash 后备中需要替换；您还需要下载 flowplayer 资源。Flash 后备绝对是可选的，不需要 适用于 iOS）：

<div class="container">
    <video class="video" preload="none" loop>
      <source src="videos/01.mp4" type="video/mp4" />
      <source src="videos/01.webm" type="video/webm; codecs=vp8,vorbis" />
      <!-- flash fallback -->
        <object width="645" height="497" type="application/x-shockwave-flash"
        data="http://PATH_TO/js/flowplayer-3.2.18.swf">
        <param name="movie" value="http://PATH_TO/js/flowplayer-3.2.18.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value="config={'clip': {'url': 'http://PATH_TO/videos/01.mp4', 'autoPlay':false, 'autoBuffering':true}}" />
      </object>
        <img src="img/01.jpg" alt="Image Fallback if JS disabled" />
    </video>
    <div class="play-overlay" style="display: block">
        <span class="play-button">Play</span>
        <img src="img/01.jpg" alt="Poster Image" />
    </div>
</div>

和 jQuery（确保在 HTML 的头部加载了 jQuery）来控制视频：

<script type="text/javascript">
jQuery(document).ready(function( $ ) { // define jQuery and wrap in doc.ready
// video controls
    var video = $('.video');
    video.click(function() { // click listener
            $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause(); // play-pause controls
            $(this).parent().find('.play-overlay').fadeToggle(400); // poster-image fader
  });
});
</script>

我的回答归功于此线程： Play/pause HTML 5 video using JQuery

【讨论】：