Jquery视频播放列表在移动设备上工作 [英] Jquery video playlist donsent work on mobile
本文介绍了Jquery视频播放列表在移动设备上工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有视频播放列表在计算机上运行良好,但是当我在手机上试用时,没有任何效果。
如果我把静态视频网址放在这个标签中这样:
I have video playlist which work good on computer but when i try it on mobile, nothing works.
If i put static video url in this tags like this:
<video src="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4" class="embed-responsive-item" controls="controls"> Your browser does not support HTML5 video. </video>
比它有效。所以我认为它与jquery的问题。
我遵循了这个例子: HTML5 - 视频播放列表 - JSFiddle [ ^ ]
我尝试了什么:
这是我的HTML:
than it works. So i think its problem with jquery.
I have followed this example: HTML5 - Video Playlist - JSFiddle[^]
What I have tried:
This is my HTML:
<section class="free-video py-2 pb-5">
<div class="navbar">
<a class="navbar-brand" href="/">
<img src="/Images/logo.png" width="100" height="79" alt="">
</a>
</div>
<div id="playlist" class="container text-center">
<div class="row d-xs-none my-5">
<div class="col-lg-4 col-sm-4 p-sm-2 p-md-3 my-1">
<div class="card border border-primary link" movieurl="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4">
<div class="card-body p-sm-2" style="">
<div class="row justify-content-center">
<div class="col-md-12 col-9 d-flex flex-column">
<p class="lead">VIDEO 1</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 p-sm-2 p-md-3 my-1">
<div class="card border border-primary link" movieurl="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4">
<div class="card-body p-sm-2">
<div class="row justify-content-center">
<div class="d-flex col-md-12 flex-column col-9">
<p class="lead">VIDEO 2</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 p-sm-2 p-md-3 my-1">
<div class="card border border-primary link" movieurl="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4">
<div class="card-body p-sm-2">
<div class="row justify-content-center">
<div class="d-flex col-md-12 flex-column col-9">
<p class=" lead">VIDEO 3</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6 col-sm-8 col-12">
<div class="embed-responsive embed-responsive-16by9"> <video id="videoarea" src="" class="embed-responsive-item" type="video/mp4" controls="controls"> Your browser does not support HTML5 video. </video> </div>
</div>
</div>
</div>
</section>
这是javascript:
This is javascript:
$(function () {
$("#playlist .link").on("click", function () {
$("#videoarea").attr({
"src": $(this).attr("movieurl"),
"poster": "",
"autoplay": "autoplay"
})
})
$("#videoarea").attr({
"src": $("#playlist .link").eq(0).attr("movieurl"),
"poster": $("#playlist .link").eq(0).attr("moviesposter")
})
})
推荐答案
(function(){
(function () {
(#playlist .link)。on(click ,function(){
("#playlist .link").on("click", function () {
(#videoarea)。attr({
src:
("#videoarea").attr({ "src":
这篇关于Jquery视频播放列表在移动设备上工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文