Question

我正在尝试播放图片点击事件的视频。我感兴趣的设备是iphone。我希望iphone用户在访问我的网站时点击图片并在设备原生播放器上播放视频。我也尝试过海报视频标签但是当视频结束并且用户回到我的网站时，海报不再显示了。我用android设备测试过没有问题。这就是为什么我决定使用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>

Answer 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。

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

Answer 2

以下是我能够实现这一目标的方法，到目前为止，它在移动和桌面方面的体验非常好（在iPhone上测试过）：

主文档中的HTML（请注意需要在闪回后备内替换的PATH_TO;您还需要下载流媒体资产。 Flash后备绝对是可选的不需要 for 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

在图像上播放视频点击iPhone

2 个答案: