单击链接时在单独的 div 中播放视频

Question

我正在尝试在链接单击时在单独的div 上播放视频，但每当我单击链接而不是在div 内播放时，它都会全屏播放并且链接更改为文件路径。

$('.link').on('click', function(event) {
event.preventDefault();
var url =$(this).attr("href");
$("#frame").attr("src", url);
})

<div class="live1452">
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="frame"></iframe>
</div>
<div class="title">
<a href="{{l.file.url}}" class="text-normal link">{{l.title}}</a>
</div>

Answer 1

似乎它遵循链接，它不应该像您调用 event.preventDefault(( 一样，如果有其他事件包装该事件，您也应该调用 event.stopPropagation((，但我们缺乏信息来知道是否可能是这种情况。

我不会为此使用 iframe，您可以尝试使用 html5 视频元素代替，这是一个代码片段：

$('.link').on('click',function(event) {
event.preventDefault();
event.stopPropagation();
var url =$(this).attr("href");
$("#video").attr("src", url);
$("#video")[0].play();
});

video {
width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="live1452">
<video controls allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></video>
</div>
<div class="title">
<a href="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" class="text-normal link">Sample video</a>
</div>